加载图像的 jQuery 事件答案

【问题标题】：jQuery event for images loaded加载图像的 jQuery 事件
【发布时间】：2010-10-28 23:38:36
【问题描述】：

是否可以通过 jQuery 事件检测所有图像何时加载？

理想情况下，应该有一个

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

或

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

但我找不到这样的东西。

我想像这样附加一个事件：

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

但是如果图片加载失败，这会中断吗？在正确的时间调用该方法至关重要。

【问题讨论】：

为什么不使用onload事件：$(window).load(doStuff)？然而，Onload 也会等待其他资源（例如脚本、样式表和 Flash），而不仅仅是图像，这对您来说可能合适也可能不合适。
将加载事件附加到所有 img 标签，就像您在代码示例中所做的那样，应该可以正常工作。如果图像无法加载 doStuff() 将不会被调用，但考虑到您必须加载所有图像的要求，这似乎是合理的。
自 jQuery 1.8 起 .load() 方法已被弃用。看看这个：stackoverflow.com/questions/3877027/…

标签： jquery dom

【解决方案1】：

根据 jQuery 的documentation，使用图像的加载事件有许多注意事项。如另一个答案中所述， ahpi.imgload.js 插件已损坏，但不再维护链接的 Paul Irish gist。

根据 Paul Irish，用于检测图像加载完成事件的规范插件现在位于：

https://github.com/desandro/imagesloaded

【讨论】：

这是答案 - 处理多个图像、缓存图像、浏览器怪癖、损坏的图像，并且是最新的。漂亮。
今天测试了它。在 2 分钟内启动并运行。
同意@Yarin，良好的文档，易于使用，多个，缓存，损坏和最新的。喜欢它。
不过，不利的一面是，imagesLoaded does not support IE7，如果这对您很重要的话。
获得imagesLoaded working on IE7 的快速简单的两行修复程序。

【解决方案2】：

如果您想检查的不是所有图像，而是特定的图像（例如，在 DOM 完成后动态替换的图像），您可以使用：

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

【讨论】：

小心，因为load() 不会在图像已经加载时触发。当图像在用户的浏览器缓存中时，这很容易发生。你可以使用$('#myImage').prop('complete')检查图像是否已经加载，当图像加载时返回true。
当它 a) 没有回答他的问题并且 b) 给出了一个糟糕的解决方案时，为什么会有这么多的选票？（意味着正确答案是@johnpolacek 的，有 1 票）
警告！！！！！！！！！！！！！！！这不是正确的答案。 johnpolacek 有正确的答案。请投票支持他的答案。
这些反对意见似乎不再相关，除非在非常特殊的情况下：Webkit 当您将图像的 src 更改为与以前完全相同的 src 时。对于刚刚添加到 DOM 的图像， $(...).load() 就足够了。在当前的 FF 和 Chrome 以及 IE6-9 中测试：jsfiddle.net/b9chris/tXVCe/2
+1 当（你知道）图像不在浏览器缓存中时可以正常工作。

【解决方案3】：

您可以使用我的插件waitForImages 来处理这个...

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

这样做的好处是您可以将其本地化为一个祖先元素，并且它可以optionally 检测 CSS 中引用的图像。

这只是冰山一角，请查看documentation 了解更多功能。

【讨论】：

嗨，Alex，看起来很有希望。但是就像johnpolacek和hirisov给出的答案和cmets中提到的那样，它是否涵盖了图像已经在浏览器缓存中的情况？
我有一个创建图像并在页面加载后动态加载它的进程，我需要在用户等待时显示一个 ajax 加载器。该插件非常适合该用例。但是，您必须在设置 img src 属性后调用该函数！

【解决方案4】：

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

这似乎在最新的 jQuery (1.4.x) 中被识别 - http://api.jquery.com/load-event - 引用：

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

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

【讨论】：

【解决方案5】：

根据this answer，您可以在window 对象上使用jQuery load event 而不是document：

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

这将在页面上的所有内容加载后触发。这与在 DOM 完成加载后触发的 jQuery(document).load(...) 不同。

【讨论】：

这正是我想要的！

【解决方案6】：

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');

【讨论】：

【解决方案7】：

目前关于 ahpi.imgload.js 插件的注释说它目前已损坏，请尝试以下要点： https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

【讨论】：

【解决方案8】：

对于同源图像，您可以使用：

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

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

【讨论】：

【解决方案9】：

也许这个插件可能有用：http://www.farinspace.com/jquery-image-preload-plugin/

【讨论】：

【解决方案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】：

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

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

});

【讨论】：

【解决方案12】：

我创建了自己的脚本，因为我发现很多插件都非常臃肿，我只是想让它按我想要的方式工作。我的检查以查看每个图像是否具有高度（本机图像高度）。我已经将它与 $(window).load() 函数结合起来解决缓存问题。

我已经对它进行了大量的代码注释，因此即使您不使用它，它也应该很有趣。它非常适合我。

废话不多说，下面是：

imgLoad.js script

【讨论】：

【解决方案13】：

正在等待所有图片加载...
我在这里找到了 jfriend00 问题的答案jquery: how to listen to the image loaded event of one container 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/

【讨论】：

【解决方案14】：

window.load = function(){}

它被所有浏览器完全支持，当所有图像完全加载时它会触发一个事件。

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

【讨论】：

肯定是window.onload = function(){}