[JQUERY] 이미지의 jQuery 이벤트는로드

이미지의 jQuery 이벤트는로드

해결법

1. ---

   1.jQuery의 문서 당, 이미지로드 이벤트를 사용하기위한주의 사항은 여러 가지가있을 수 있습니다. 다른 답변에서 언급 한 바와 같이, ahpi.imgload.js 플러그인은 파괴되지 않지만, 링크 된 폴 아일랜드 요점은 더 이상 유지됩니다.

   jQuery의 문서 당, 이미지로드 이벤트를 사용하기위한주의 사항은 여러 가지가있을 수 있습니다. 다른 답변에서 언급 한 바와 같이, ahpi.imgload.js 플러그인은 파괴되지 않지만, 링크 된 폴 아일랜드 요점은 더 이상 유지됩니다.

   폴 아일랜드어 당, 이미지로드 완료 이벤트를 검출하기위한 표준 플러그인에서 지금이다 :

   https://github.com/desandro/imagesloaded

2. ---

   2.당신이 모든 이미지를 확인하기를 원하지만 경우 특정 하나는 (. 예를 들어, 이미지가 동적으로 DOM이 이미 완료된 후 교체하는 것이) 당신은이를 사용할 수 있습니다 :

   당신이 모든 이미지를 확인하기를 원하지만 경우 특정 하나는 (. 예를 들어, 이미지가 동적으로 DOM이 이미 완료된 후 교체하는 것이) 당신은이를 사용할 수 있습니다 :

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

3. ---

   3.이 작업을 처리하기 위해 내 플러그인 waitForImages을 사용할 수 있습니다 ...

   이 작업을 처리하기 위해 내 플러그인 waitForImages을 사용할 수 있습니다 ...

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

   이것의 장점은 하나 개의 상위 요소로 지역화 할 수 있으며 선택적으로 CSS에서 참조 이미지를 검색 할 수 있습니다.

   이것은 더 많은 기능에 대한 설명서를 확인하지만 빙산의 일각에 불과하다.

4. ---

   4.JQuery와 $의 사용 (). IMG 이벤트 핸들러와 같은 하중 ()을 보장 할 수 없습니다. 캐시에서 이미지를로드하는 경우, 일부 브라우저는 이벤트를 해고하지 않을 수 있습니다. 같은 값에 IMG 요소의 SRC 속성을 변경 한 경우의 경우 (오래된?) 사파리의 버전, onload 이벤트가 발생하지 않습니다.

   JQuery와 $의 사용 (). IMG 이벤트 핸들러와 같은 하중 ()을 보장 할 수 없습니다. 캐시에서 이미지를로드하는 경우, 일부 브라우저는 이벤트를 해고하지 않을 수 있습니다. 같은 값에 IMG 요소의 SRC 속성을 변경 한 경우의 경우 (오래된?) 사파리의 버전, onload 이벤트가 발생하지 않습니다.

   http://api.jquery.com/load-event - -이 최신 jQuery를 (1.4.x를) 인식 것 같습니다 인용 :

   플러그인 지금이 케이스와 IMG 요소의 부하 상태에 대한 IE의 "완전한"속성을 인식 할 수가있다 : http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

5. ---

   5.이 답변에 따라, 대신 문서의 창 개체에 jQuery를로드 이벤트를 사용할 수 있습니다 :

   이 답변에 따라, 대신 문서의 창 개체에 jQuery를로드 이벤트를 사용할 수 있습니다 :

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

   페이지의 모든 내용이로드 된 후이 트리거됩니다. jQuery를 (문서)에서이 다릅니다은 DOM이 완료로드 후 트리거되는 (...) .load.

6. ---

   6.imagesLoaded 당신이 crossbrowser 솔루션을 필요로하는 경우 플러그인은 갈 방법입니다

   imagesLoaded 당신이 crossbrowser 솔루션을 필요로하는 경우 플러그인은 갈 방법입니다

    $("<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');
   

7. ---

   7.그것이 현재 고장, 대신이 요점을 시도하는 것을 말하는 순간에 플러그인 ahpi.imgload.js에 메모가있다 : https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

   그것이 현재 고장, 대신이 요점을 시도하는 것을 말하는 순간에 플러그인 ahpi.imgload.js에 메모가있다 : https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

8. ---

   8.

   $.get('http://www.your_domain.com/image.jpg', imgLoaded);
   
   function imgLoaded(){
       console.log(this, 'loaded');
   }
   

9. ---

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

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

10. ---

    10.

      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();
               }
            });
         });
      }
    

11. ---

    11.

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

12. ---

    12.나는 많은 플러그인이 상당히 비 대한 것으로 발견, 나는 그냥 내가 원하는 방식으로 작업하고 싶었 기 때문에 나는 내 자신의 스크립트를 만들었습니다. 각 이미지 높이 (기본 상 높이)가있는 경우 내 확인합니다. 나는 $ (창) .load () 함수를 사용하여 캐시의 문제를 해결하기 위해 것을 결합했습니다.

    나는 많은 플러그인이 상당히 비 대한 것으로 발견, 나는 그냥 내가 원하는 방식으로 작업하고 싶었 기 때문에 나는 내 자신의 스크립트를 만들었습니다. 각 이미지 높이 (기본 상 높이)가있는 경우 내 확인합니다. 나는 $ (창) .load () 함수를 사용하여 캐시의 문제를 해결하기 위해 것을 결합했습니다.

    당신이 그것을 사용하지 않는 경우에도 보는 재미 있어야한다, 그래서 나는 한 코드는 꽤 무겁게 댓글을 달았습니다. 그것은 나를 위해 완벽하게 작동합니다.

    속히, 여기있다 :

    imgLoad.js 스크립트

13. ---

    13.부하에 모든 이미지를 기다리는 중 ... 여기 JQuery와 jfriend00 내 문제에 anwser를 발견하는 방법을 하나 개의 컨테이너 사업부의 이미지를로드 이벤트를 수신하는 방법? ... 및 "경우 (this.complete)" .. 모든 부하 것은 어떤 가능성 캐시!에서 대기하고 난은 "오류"이벤트를 추가했습니다 ... 그것은 모든 브라우저에서 강력한입니다

    부하에 모든 이미지를 기다리는 중 ... 여기 JQuery와 jfriend00 내 문제에 anwser를 발견하는 방법을 하나 개의 컨테이너 사업부의 이미지를로드 이벤트를 수신하는 방법? ... 및 "경우 (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/

14. ---

    14.window.load = 함수 () {}

    window.load = 함수 () {}

    그것의 완전히 모든 브라우저에서 지원하고, 모든 이미지가 완전히로드 될 때이 이벤트를 발생합니다.

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

from https://stackoverflow.com/questions/910727/jquery-event-for-images-loaded by cc-by-sa and MIT license