로드 된 이미지에 대한 jQuery 이벤트

모든 이미지가 jQuery 이벤트를 통해로드되는시기를 감지 할 수 있습니까?

이상적으로는

$(document).idle(function()
{
}

또는

$(document).contentLoaded(function()
{
}

그러나 나는 그런 것을 찾을 수 없습니다.

다음과 같은 이벤트를 첨부 할 생각 :

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

그러나 이미지가로드되지 않으면 이것이 중단됩니까? 메서드를 적절한시기에 호출하는 것은 매우 중요합니다.

jQuery의 문서 에 따라 이미지와 함께로드 이벤트를 사용하는 데는 여러 가지주의 사항이 있습니다. 다른 답변에서 언급했듯이 ahpi.imgload.js 플러그인이 손상되었지만 연결된 Paul Irish 요점은 더 이상 유지되지 않습니다.

Paul Irish에 따르면 이미지로드 완료 이벤트를 감지하기위한 표준 플러그인 은 다음과 같습니다.

https://github.com/desandro/imagesloaded

모든 이미지가 아닌 특정 이미지 (예 : DOM이 이미 완료된 후 동적으로 대체 한 이미지)를 확인하려면 다음을 사용할 수 있습니다.

$('#myImage').attr('src', 'image.jpg').on("load", function() {  
  alert('Image Loaded');  
});  

내 플러그인 waitForImages 를 사용 하여 이것을 처리 할 수 있습니다 .

$(document).waitForImages(function() {
   // Loaded.
});

이것의 장점은 하나의 조상 요소로 지역화 할 수 있고 선택적 으로 CSS에서 참조 된 이미지를 감지 할 수 있다는 것 입니다.

이것은 빙산의 일각에 불과합니다 . 더 많은 기능에 대해서는 문서 를 확인하십시오 .

IMG 이벤트 핸들러로 jQuery $ (). load () 사용이 보장되지 않습니다. 이미지가 캐시에서로드되면 일부 브라우저에서 이벤트를 시작하지 못할 수 있습니다. (이전?) Safari 버전의 경우 IMG 요소의 SRC 속성을 동일한 값 으로 변경하면 onload 이벤트가 발생하지 않습니다.

이것은 최신 jQuery (1.4.x) ( http://api.jquery.com/load-event )에서 인식되는 것으로 보입니다 .

이미지가 브라우저 캐시에서로드되는 경우로드 이벤트가 트리거되지 않을 수 있습니다. 이 가능성을 설명하기 위해 이미지가 준비되면 즉시 실행되는 특수로드 이벤트를 사용할 수 있습니다. event.special.load는 현재 플러그인으로 사용할 수 있습니다.

이제이 경우를 인식하는 플러그인과 IMG 요소로드 상태에 대한 IE의 "완료"속성이 있습니다. http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

당 이 답변 , 당신은 사용할 수있는 jQuery를로드 이벤트를 온 window대신의 목적 document:

jQuery(window).load(function() {
    console.log("page finished loading now.");
});

페이지의 모든 콘텐츠가로드 된 후에 실행됩니다. 이것은 jQuery(document).load(...)DOM이로드를 마친 후에 트리거되는 것과 다릅니다 .

crossbrowser 솔루션이 필요한 경우 imagesLoaded 플러그인을 사용할 수 있습니다.

 $("<img>", {src: 'image.jpg'}).imagesLoaded( function( $images, $proper, $broken ){
 if($broken.length > 0){
 //Error CallBack
 console.log('Error');
 }
 else{
 // Load CallBack
 console.log('Load');
 }
 });

IE 해결 방법이 필요한 경우

 var img = $("<img>", {
    error: function() {console.log('error'); },
    load: function() {console.log('load');}
    });
  img.attr('src','image.jpg');

현재 ahpi.imgload.js 플러그인에 현재 고장났다는 메모가 있으며 대신이 요점을 사용해보십시오 : https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

동일 출처 이미지의 경우 다음을 사용할 수 있습니다.

$.get('http://www.your_domain.com/image.jpg', imgLoaded);

function imgLoaded(){
    console.log(this, 'loaded');
}

이 플러그인이 유용 할 수 있습니다 : http://www.farinspace.com/jquery-image-preload-plugin/

  function CheckImageLoadingState()
  {
     var counter = 0;
     var length = 0;

     jQuery('#siteContent img').each(function() 
     {
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
          length++;
     });

     jQuery('#siteContent img').each(function() 
     {  
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
        {
           jQuery(this).load(function() 
           {
           }).each(function() {
              if(this.complete) jQuery(this).load();
            });
        }
        jQuery(this).load(function()
        {
           counter++;
           if(counter === length) 
           {  
              //function to call when all the images have been loaded
              DisplaySiteContent();
           }
        });
     });
  }

$( "img.photo" ).load(function() {

    $(".parrentDiv").css('height',$("img.photo").height());
    // very simple

}); 

나는 많은 플러그인이 상당히 부풀어 오르고 내가 원하는 방식으로 작동하기를 원했기 때문에 자체 스크립트를 만들었습니다. Mine은 각 이미지에 높이 (기본 이미지 높이)가 있는지 확인합니다. 캐싱 문제를 해결하기 위해 $ (window) .load () 함수와 결합했습니다.

나는 코드를 상당히 많이 주석 처리 했으므로 사용하지 않더라도 살펴 보는 것이 흥미로울 것입니다. 그것은 나를 위해 완벽하게 작동합니다.

더 이상 고민하지 않고 여기에 있습니다.

imgLoad.js 스크립트

모든 이미지가로드
되기를 기다리는 중 ... 여기에서 jfriend00 문제에 대한 anwser를 찾았습니다. jquery : 하나의 컨테이너 div의 이미지로드 이벤트를 수신하는 방법은 무엇입니까? .. 및 "if (this.complete)"
모든 것이로드되고 일부는 캐시에있을 수있을 때까지 기다리며! .. "오류"이벤트를 추가 했습니다. 모든 브라우저에서 강력합니다.

$(function() { // Wait dom ready
    var $img = $('img'), // images collection
        totalImg = $img.length,
        waitImgDone = function() {
            totalImg--;
            if (!totalImg) {
                console.log($img.length+" image(s) chargée(s) !");
            }
        };
    $img.each(function() {
        if (this.complete) waitImgDone(); // already here..
        else $(this).load(waitImgDone).error(waitImgDone); // completed...
    });
});

데모 : http://jsfiddle.net/molokoloco/NWjDb/

window.load = function(){}

모든 브라우저에서 완벽하게 지원되며 모든 이미지가 완전히로드되면 이벤트가 발생합니다.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload