我想要做:
$("img").bind('load', function() {
// do stuff
});
我想要做:
$("img").bind('load', function() {
// do stuff
});
Answers:
如果src
已经设置了,则在绑定事件处理程序之前,将在缓存的情况下触发事件。要解决此问题,您可以循环检查并基于off触发事件.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
}
});
setTimeout(function(){//do stuff},0)
在“加载”函数中添加一个... 0会给浏览器系统(DOM)一个额外的滴答声,以确保所有内容均已正确更新。
.load()
不会触发事件并且具有1个必需参数,请.trigger("load")
改用
我可以建议您将其重新加载到非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') ;
}) ;
}) ;
load
处理程序之前将其附加,这也将不起作用,但是对于一个图像,OP代码对许多人都有效:)
#img
是一个ID而不是元素选择器:)也this.src
可以使用,不需要在不需要的地方使用jQuery :)但是,无论哪种情况,创建另一个图像似乎都是过分的。
imageLoaded
,请使用tmp.onload = imageLoaded.bind(this)
我的简单解决方案,它不需要任何外部插件,对于一般情况应该足够了:
/**
* Trigger a callback when the selected images are loaded:
* @param {String} selector
* @param {Function} callback
*/
var onImgLoad = function(selector, callback){
$(selector).each(function(){
if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
callback.apply(this);
}
else {
$(this).on('load', function(){
callback.apply(this);
});
}
});
};
像这样使用它:
onImgLoad('img', function(){
// do stuff
});
例如,要使图像在加载时淡入淡出,您可以执行以下操作:
$('img').hide();
onImgLoad('img', function(){
$(this).fadeIn(700);
});
或者,如果您喜欢类似jquery插件的方法,请执行以下操作:
/**
* Trigger a callback when 'this' image is loaded:
* @param {Function} callback
*/
(function($){
$.fn.imgLoad = function(callback) {
return this.each(function() {
if (callback) {
if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
callback.apply(this);
}
else {
$(this).on('load', function(){
callback.apply(this);
});
}
}
});
};
})(jQuery);
并以这种方式使用它:
$('img').imgLoad(function(){
// do stuff
});
例如:
$('img').hide().imgLoad(function(){
$(this).fadeIn(700);
});
您真的必须使用jQuery吗?您也可以将onload
事件直接附加到图像上;
<img src="/path/to/image.jpg" onload="doStuff(this);" />
无论是否从缓存加载图像,它都会在每次加载图像时触发。
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();
}
});
load
处理程序,然后再在each
函数中调用它。
我本人只是遇到了这个问题,到处搜索了不涉及杀死我的缓存或下载插件的解决方案。
我没有立即看到此线程,所以我找到了其他有趣的修复程序,并且(我认为)值得在此处发布:
$('.image').load(function(){
// stuff
}).attr('src', 'new_src');
我实际上是从这里的评论中得到这个想法的:http : //www.witheringtree.com/2009/05/image-load-event-binding-with-ie-using-jquery/
我不知道它为什么起作用,但是我已经在IE7上对其进行了测试,以及它在现在起作用之前在哪里破裂。
希望能帮助到你,
接受的答案实际上说明了原因:
如果已经设置了src,那么在绑定事件处理程序之前,事件将在有案例的缓存中触发。
$image.load(function(){ something(); }).attr('src', $image.attr('src'));
重设原始来源。
通过使用jQuery用图像的src生成新图像,并直接为其分配load方法,当jQuery完成生成新图像时,将成功调用load方法。这在IE 8、9和10中为我工作
$('<img />', {
"src": $("#img").attr("src")
}).load(function(){
// Do something
});
我找到了一个解决方案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;
如果您想这样做,我可以给您一些提示:
<div style="position:relative;width:100px;height:100px">
<img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
<img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>
如果您在浏览器缓存图片时执行此操作,则始终显示img没问题,而是在真实图片下加载img。
如果您需要纯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