加载图片的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插件被破坏，但保罗爱尔兰的要点不再被保留。
Per Paul Irish 是检测图像加载完成事件的标准插件，现在位于：
如果你想检查不是所有的图像，而是一个特定的图像（例如，在DOM已经完成后动态替换的图像），你可以使用这个：
$('#myImage').attr('src', 'image.jpg').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元素加载状态的“完整”属性： http : //github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
按照这个答案 ，你可以在window对象上使用jQuery加载事件而不是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脚本
等待所有图像加载…
我找到了jwriend00这里jquery的问题：如何听一个容器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/
window.load = function(){}
它完全支持所有的浏览器，并且会在所有图像完全加载时触发一个事件。
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
