是否可以通过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的documentation，有一些注意事项可以将load事件与图像一起使用。正如另一个答案所述，ahpi.imgload.js插件已损坏，但链接的Paul Irish gist已不再维护。
Per Paul Irish，用于检测图像加载完成事件的规范插件现在位于：
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（）函数结合起来解决缓存问题。
我的代码对它进行了相当多的评论，所以即使你不使用它也应该很有趣。它对我来说很完美。
不用多说，这里是：
正在等待加载所有图像... 我在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...
});
});
但是：ぁzxswい
如果您想要检查的不是所有图像，而是特定的图像（例如，在DOM已经完成后动态替换的图像），您可以使用：
$('#myImage').attr('src', 'image.jpg').on("load", function() {
alert('Image Loaded');
});
您可以使用我的插件waitForImages来处理这个......
$(document).waitForImages(function() {
// Loaded.
});
这样做的好处是你可以将它本地化为一个祖先元素，它可以optionally检测CSS中引用的图像。
这只是冰山一角，检查documentation以获得更多功能。
不保证使用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
根据this answer，你可以在jQuery load event对象而不是window上使用document：
jQuery(window).load(function() {
console.log("page finished loading now.");
});
这将在加载页面上的所有内容后触发。这与在DOM完成加载后触发的jQuery(document).load(...)不同。
如果你需要一个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 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');
}