로드된 영상에 대한 jQuery 이벤트

로드된 영상에 대한 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 gist는 더 이상 유지되지 않습니다.

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의 "완전한" 속성과 이 경우를 인식할 수 있는 플러그인이 있습니다.

이 답변에 따르면, 당신은 jQuery load 이벤트를 사용할 수 있습니다.window 대신 document:

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

페이지의 모든 컨텐츠를 로드한 후에 트리거됩니다.와는 다릅니다.jQuery(document).load(...)DOM 로드가 완료된 후 트리거됩니다.

imagesLoaded Plugin은 크로스브라우저 솔루션이 필요한 경우 사용 가능합니다.

 $("<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

}); 

저는 많은 플러그인이 상당히 비대하다는 것을 알았기 때문에, 제가 원하는 대로 작동하기를 원했기 때문에 제 자신만의 스크립트를 만들었습니다.마인은 각 이미지에 높이(원본 이미지 높이)가 있는지 확인합니다.캐싱 문제를 해결하기 위해 $(window.load() 함수와 결합했습니다.

제가 코드를 꽤 많이 달았으니 사용하지 않더라도 보는 것이 흥미로울 것입니다.저한테 딱 들어맞습니다.

별말씀을요, 여기 있습니다.

imgLoad.js 스크립트

모든 이미지가 로드되기를 기다리는 중...
여기 jfriend00에 대한 문제에 대한 답을 찾았습니다. jquery: 한 컨테이너 디브의 이미지 로드 이벤트를 듣는 방법은 무엇입니까? .. 그리고 "만약 (이것이 완성된다면)"입니다.
모든 것이 로드되기를 기다리고 있고 일부는 캐시에 있을 가능성이 있습니다!...오류 이벤트를 추가했습니다...모든 브라우저에서 강력합니다.

$(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

언급URL : https://stackoverflow.com/questions/910727/jquery-event-for-images-loaded