图像加载的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的文档，对于将load事件与图像一起使用有很多警告。如另一个答案中所述，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中引用的图像。

不过，这只是冰山一角，请查看文档以获取更多功能。

不保证将jQuery $（）。load（）用作IMG事件处理程序。如果图像是从缓存加载的，则某些浏览器可能不会触发该事件。对于Safari版本（较旧？），如果将IMG元素的SRC属性更改为相同的值，则不会触发onload事件。

看来，这是在最新的jQuery版本（1.4.x）认可- http://api.jquery.com/load-event -引用：

如果从浏览器缓存中加载了图像，则可能不会触发加载事件。为了解决这种可能性，我们可以使用特殊的加载事件，如果映像准备就绪，则会立即触发。event.special.load当前可作为插件使用。

现在有一个插件可以识别这种情况，并且IE的IMG元素加载状态的“ complete”属性为：http : //github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

按照这个答案，您可以在对象上使用jQuery load事件，window而不是使用document：

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

页面上的所有内容加载完毕后，将触发此操作。这与jQuery(document).load(...)DOM完成加载后触发的触发事件不同。

如果需要跨浏览器解决方案，可以使用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 WorkAround，它将可以

 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：如何收听一个容器div的图像加载事件？..和“ if（this.complete）”
等待所有内容加载，并且可能在缓存中！..并且我添加了“ error”事件... 它在所有浏览器中都非常可靠

$(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/zh-CN/docs/Web/API/GlobalEventHandlers/onload