是否可以通过 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,将加载事件与图像一起使用有许多注意事项。如另一个答案中所述, 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');
});
load()
。当图像在用户的浏览器缓存中时,这很容易发生。您可以使用 $('#myImage').prop('complete')
检查图像是否已加载,加载图像时返回 true。
您可以使用我的插件 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 - 中得到认可 - 引用:
如果图像是从浏览器缓存中加载的,则可能不会触发 load 事件。为了解决这种可能性,我们可以使用一个特殊的加载事件,如果图像准备好,它会立即触发。 event.special.load 目前可作为插件使用。
现在有一个插件可以识别这种情况和 IE 的 IMG 元素加载状态的“完整”属性:http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js
根据 this answer,您可以在 window
对象上使用 jQuery load event 而不是 document
:
jQuery(window).load(function() {
console.log("page finished loading now.");
});
这将在页面上的所有内容加载后触发。这与在 DOM 完成加载后触发的 jQuery(document).load(...)
不同。
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');
目前关于 ahpi.imgload.js 插件的注释说它当前已损坏,请尝试使用此要点:https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58
对于同源图像,您可以使用:
$.get('http://www.your_domain.com/image.jpg', imgLoaded);
function imgLoaded(){
console.log(this, 'loaded');
}
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...
});
});
演示:http://jsfiddle.net/molokoloco/NWjDb/
window.load = function(){}
它被所有浏览器完全支持,当所有图像完全加载时它会触发一个事件。
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
不定期副业成功案例分享