我想做的是:
$("img").bind('load', function() {
// do stuff
});
但是当图像从缓存中加载时,load事件不会触发。jQuery文档建议用一个插件来解决这个问题,但它不起作用
我想做的是:
$("img").bind('load', function() {
// do stuff
});
但是当图像从缓存中加载时,load事件不会触发。jQuery文档建议用一个插件来解决这个问题,但它不起作用
当前回答
你可以使用JAIL插件来解决这个问题,它还允许你延迟加载图像(提高页面性能)并将回调作为参数传递
$('img').asynchImageLoader({callback : function(){...}});
HTML应该是这样的
<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />
其他回答
通过使用jQuery生成带有图像src的新图像,并将load方法直接分配给它,当jQuery生成新图像时,load方法将被成功调用。这是为我工作在IE 8, 9和10
$('<img />', {
"src": $("#img").attr("src")
}).load(function(){
// Do something
});
我有这个问题与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
对GUS示例的修改:
$(document).ready(function() {
var tmpImg = new Image() ;
tmpImg.onload = function() {
// Run onload code.
} ;
tmpImg.src = $('#img').attr('src');
})
在onload之前和之后设置源。
你也可以使用这段代码来支持加载错误:
$("img").on('load', function() {
// do stuff on success
})
.on('error', function() {
// do stuff on smth wrong (error 404, etc.)
})
.each(function() {
if(this.complete) {
$(this).load();
} else if(this.error) {
$(this).error();
}
});