我想做的是:
$("img").bind('load', function() {
// do stuff
});
但是当图像从缓存中加载时,load事件不会触发。jQuery文档建议用一个插件来解决这个问题,但它不起作用
我想做的是:
$("img").bind('load', function() {
// do stuff
});
但是当图像从缓存中加载时,load事件不会触发。jQuery文档建议用一个插件来解决这个问题,但它不起作用
当前回答
我自己也有这个问题,到处寻找一个解决方案,不涉及杀死我的缓存或下载插件。
我没有立即看到这个帖子,所以我发现了一些其他的东西,这是一个有趣的修复,(我认为)值得张贴在这里:
$('.image').load(function(){
// stuff
}).attr('src', 'new_src');
实际上,我从这里的评论中得到了这个想法:http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/
我不知道为什么它能工作,但我已经在IE7上测试了这个,在它现在工作之前它在哪里坏了。
希望能有所帮助,
Edit
公认的答案实际上解释了原因:
如果src已经设置,那么在绑定事件处理程序之前,事件就会在缓存中触发。
其他回答
你可以使用JAIL插件来解决这个问题,它还允许你延迟加载图像(提高页面性能)并将回调作为参数传递
$('img').asynchImageLoader({callback : function(){...}});
HTML应该是这样的
<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />
对GUS示例的修改:
$(document).ready(function() {
var tmpImg = new Image() ;
tmpImg.onload = function() {
// Run onload code.
} ;
tmpImg.src = $('#img').attr('src');
})
在onload之前和之后设置源。
通过使用jQuery生成带有图像src的新图像,并将load方法直接分配给它,当jQuery生成新图像时,load方法将被成功调用。这是为我工作在IE 8, 9和10
$('<img />', {
"src": $("#img").attr("src")
}).load(function(){
// Do something
});
如果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()的变化,因此事件处理程序不会运行两次。
如果你想要一个纯CSS的解决方案,这个技巧非常有效——使用transform对象。这也适用于图像缓存与否:
CSS:
.main_container{
position: relative;
width: 500px;
height: 300px;
background-color: #cccccc;
}
.center_horizontally{
position: absolute;
width: 100px;
height: 100px;
background-color: green;
left: 50%;
top: 0;
transform: translate(-50%,0);
}
.center_vertically{
position: absolute;
top: 50%;
left: 0;
width: 100px;
height: 100px;
background-color: blue;
transform: translate(0,-50%);
}
.center{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
transform: translate(-50%,-50%);
}
HTML:
<div class="main_container">
<div class="center_horizontally"></div>
<div class="center_vertically"></div>
<div class="center"></div>
</div>
</div
Codepen例子
Codepen LESS的例子