每次图像加载完成后运行一个函数
我想知道如何使用JQuery创建一个函数,每次图像加载完成后都会运行该函数。我希望这个函数被称为每个时间,不仅一次。因此,例如,如果我有“image1.jpg”并且它在页面启动时加载,则会调用该函数。然后,如果我更改图像,并在使用Javascript更改后再次加载图像,我希望“加载”函数再次触发。我试过Jquery Load()函数,但它只运行一次,而不是图像被另一个替换后的第二次。每次图像加载完成后运行一个函数
我还希望即使图像已被缓存,甚至也会发生。这意味着每次我更改图像的'src'属性时,我都希望特定的函数能够启动 - 即使图像已被缓存,也是如此。
例子:
$("#myimageselector").attr("src", "http://domain.com/the_new_image.jpg");
我想,当发生这种情况,即使图像已经缓存功能将闪光。我认为有可能知道这些图像是否已被缓存。我只需要有一个将运行一次(当然)的.load()函数,如果它没有被执行,这意味着图像已被缓存。至少对于我的具体用法。
想法:也许我们应该绑定一个事件,检查DOM中的变化以进行特定的元素更改。所以也许如果图像已经完成加载,一个特定的DOM元素被改变,所以我们可以检查前后值。
谢谢。
最接近我得到你想要的解决方案,也处理缓存的图像。
我已经创建了一个jQuery插件:
(function($){
var dummy_img = "dummy1x1.png",
dummy_width = 1,
dummy_height = 1;
$("<img>").attr("src", dummy_img); //Preload image
$.fn.setSrc = function(src, func, args){
var $img = this;
if(/img/i.test(this.get(0).tagName)) return; //Cancel at non-IMG elements
if(!(args instanceof Array)) args = [];
var poller = window.setInterval(function(){
if($img.height() != dummy_height || $img.width() != dummy_width){
loaded();
}
}, 200);
$img.attr("src", dummy_img);
$img.bind("load", loaded);
$img.bind("error", clearPoller);
function loaded(){
clearPoller();
//If a callback function exists, execute it
if(typeof func == "function") func.apply($img,args);
func = null;//Prevent unwanted executions
}
function clearPoller(){
window.clearInterval(poller);
}
}
})(jQuery);
用法:
$("#myImg").setSrc("image.png", function(){
alert(this.attr("src") + " has loaded!");
});
这背后的概念:
- 变化的宽度和高度为1(使用预加载的伪图像)
- 绑定
load
和error
事件处理程序 - 运行一个轮询器,检查图像的宽度和高度。
- 当图像加载完成/失败时,会触发
load
或error
事件。触发后,轮询器被清除,并执行传递的功能。 - 当这些事件都未被触发时,轮询器仍然能够检测到图像大小的变化。加载缓存图像时,元素的宽度/高度会更新,这由轮询器检测到。在这种情况下,轮询器清除间隔,并执行传递的函数。
可以使用的onLoad功能IMG标记
$(".img").load(function(){
// do something
});
+1,但是您指定* class *选择器而不是* tag *选择器。 – user113716
更新我的问题。我需要它运行EVERYTIME图像已被加载,即使它已被缓存。谢谢 –
$('img').live('load', function()
{
alert("image loaded: "+this.src);
});
使用jQuery活的方法来跟踪负荷。
这将运行图像是否被缓存与否:
$(document).ready(function() {
var imgLoadFunc = function() {
//code to run
};
$("img").each(function() {
if(this.complete) {
imgLoadFunc.call(this);
} else {
$(this).load(function() {
imgLoadFunc.call(this);
});
}
});
});
严格地说,你不需要使用call()
,但是这将让你更使用图像元素的问题jquery-ish的方式。 imgLoadFunc
:
var img = $(this);
当使用$(“#img”)。attr('src','http://domain.com/the_new_image.jpg')调用图像时,它不会触发imgLoadFunc。它会因为图像被缓存而触发一次。 –
啊,对。是的,只涵盖了页面加载。对不起,我读得太快了。但我做了一个快速测试,并以这种方式动态更新映像,称为加载回调:'$(“#theImg”)。attr(“src”,“theUrl”)。 call(this); \t});'缓存的和其他的 – Donamite
我不认为你可以使用'load'事件,因为它似乎没有泡沫。至少[在这个例子中](http://jsfiddle.net/s5zjj/)它不会触发。另外,你真的不需要在'$(document).ready(...)'中放置'.live()'代码。如果你打算使用'.live()',那么最好放在外面,这样如果在DOM准备好之前发生事件,处理程序就会触发。 – user113716
不会触发。我也希望它在图像已被缓存时触发 –
不幸的是,无法检测缓存图像何时被重新加载。如果图像很小,并且加载事件对您来说非常重要,您可以通过在图像中附加一个随机查询字符串来禁用缓存,例如:'img.src =“img.png?”+(new Date).getTime ()'。 –