jQuery ajax 콘텐츠가 div, event ready에로드되었습니다.

Question

jQuery Ajax를 사용하여 페이지에 동적으로 콘텐츠를로드하고 있습니다. 콘텐츠에는 이미지가 포함되어 있으므로 DOM 준비와 같은 모든 이미지가로드되는 시점을 알아야합니다.

초기 내용이 숨겨집니다. 이미지가 성공적으로로드 된 후 해당 이미지를 포함하는 div가 표시됩니다. Ajax가로드 된 컨텐츠를 표시 할 준비가되었는지를 감지하는 방법이 있습니까? Ajax success 서버로부터 텍스트 응답이 리턴 될 때 함수가 호출되지만, 모두로드되고 이미지가로드 될 때 함수를 실행해야합니다.

Answer 1

이. 동적 콘텐츠가 모두 #root 개체에 삽입되었다고 가정 해 봅시다. 당신이 동적 주장 삽입 한 직후,이 코드를 실행할 수 있습니다 : 당신은 동적 콘텐츠를 삽입 한 후

function notifyWhenImagesLoaded(rootSelector, callback) { 
    var imageList = $(rootSelector + " img"); 
    var imagesRemaining = imageList.length; 

    function checkDone() { 
     if (imagesRemaining === 0) { 
      callback() 
     } 
    } 

    imageList.each(function() { 
     // if the image is already loaded, just count it 
     if (this.complete) { 
      --imagesRemaining; 
     } else { 
      // not loaded yet, add an event handler so we get notified 
      // when it finishes loading 
      $(this).load(function() { 
       --imagesRemaining; 
       checkDone(); 
      }); 
     } 
    }); 
    checkDone(); 
} 

notifyWhenImagesLoaded("#root", function() { 
    // put your code here to run when all the images are loaded 
}); 

이 기능을 호출합니다. 동적 콘텐츠의 모든 이미지 태그를 찾고 이미로드 된 태그가 있는지 확인합니다. 그들이 가지고 있다면, 그것들을 센다. 그렇지 않은 경우로드 이벤트 핸들러를 설치하므로 이미지가로드 될 때 알림을받습니다. 마지막 이미지로드가 끝나면 콜백을 호출합니다.

Answer 2

아약스 그냥 문서 (일부 <img> 태그를 포함)로 HTML의 무리를 삽입하고 모든 새로운 이미지를로드 할 때, 당신처럼 할 수있는 당신이 알고 싶은 경우에

$.ajax({ 
    type: "POST", 
    url: "myfile.*", 
    data: {data : params}, 
    cache: false, 
    success: function(return_data){ 
     //here you have the answer to Ajax 
     //at this point you have the content ready for use 
     //in your case here you would find the images that you got back from the file called by ajax 
    } 
}); 

Answer 3

로드와 함께 on 메소드를 사용할 수 있습니다. 총 아이템 수를 계산하고로드 이벤트를 사용하여 총 이미지 수를로드하십시오. 이렇게 진행 막대를 만들 수도 있습니다.

뭐 그런 당신이 AJAX 호출

$('img').on('load', function(){ 

    // Count items here  

});