我想做的是:
$("img").bind('load', function() {
// do stuff
});
但是当图像从缓存中加载时,load事件不会触发。jQuery文档建议用一个插件来解决这个问题,但它不起作用
我想做的是:
$("img").bind('load', function() {
// do stuff
});
但是当图像从缓存中加载时,load事件不会触发。jQuery文档建议用一个插件来解决这个问题,但它不起作用
当前回答
我找到了一个解决方案https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 (此代码直接取自注释)
var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;
其他回答
我是否可以建议您将其重新加载到非dom图像对象中?如果它被缓存,这将完全不花费时间,onload仍然会触发。如果它没有被缓存,它将在图像加载时触发onload,这应该与图像的DOM版本完成加载的时间相同。
Javascript:
$(document).ready(function() {
var tmpImg = new Image() ;
tmpImg.src = $('#img').attr('src') ;
tmpImg.onload = function() {
// Run onload code.
} ;
}) ;
更新(以处理多个图像和正确顺序的onload附件):
$(document).ready(function() {
var imageLoaded = function() {
// Run onload code.
}
$('#img').each(function() {
var tmpImg = new Image() ;
tmpImg.onload = imageLoaded ;
tmpImg.src = $(this).attr('src') ;
}) ;
}) ;
我有这个问题与IE的e.target.width将是未定义。加载事件会发生,但我无法在IE中获得图像的尺寸(chrome + FF工作)。
结果你需要寻找e.currentTarget.naturalWidth & e.currentTarget.naturalHeight。
再说一次,IE有自己的(更复杂的)做事方式。
只需要在img对象定义后的另一行中重新添加src参数。这将欺骗IE触发lad事件。它很丑,但这是我迄今为止发现的最简单的解决方法。
jQuery('<img/>', {
src: url,
id: 'whatever'
})
.load(function() {
})
.appendTo('#someelement');
$('#whatever').attr('src', url); // trigger .load on IE
你真的必须用jQuery来做吗?你也可以将onload事件直接附加到你的图像上;
<img src="/path/to/image.jpg" onload="doStuff(this);" />
它将在每次图像加载时触发,无论是否从缓存中加载。
如果src已经设置,则在绑定事件处理程序之前,事件就会在缓存的情况下触发。为了解决这个问题,你可以循环检查和触发基于.complete的事件,就像这样:
$("img").one("load", function() {
// do stuff
}).each(function() {
if(this.complete) {
$(this).load(); // For jQuery < 3.0
// $(this).trigger('load'); // For jQuery >= 3.0
}
});
注意从.bind()到.one()的变化,因此事件处理程序不会运行两次。