每次图像加载完成后运行一个function
我想知道如何使用JQuery创建一个在每次图像加载完成后运行的函数。 我希望该函数被称为每个时间，而不仅仅是一次。 因此，例如，如果我有“image1.jpg”并且它已在页面启动时加载，则将调用该函数。 然后，如果我更改了图像并且在我使用Javascript更改后再次加载图像，我希望再次触发“加载”function。 我尝试过Jquery Load（）函数，但它只运行一次，而不是第二次用另一个图像替换后。
我也希望即使图像也被缓存，偶数也会发生。 这意味着每次我更改图像的’wrc’属性时，我都希望启动一个特定的function – 即使图像已经被缓存了。
例：
$("#myimageselector").attr("src", "http://sofzh.miximages.com/javascript/the_new_image.jpg"); 我希望当发生这种情况时，即使图像已经被缓存，该函数也会触发。 我认为可以知道图像是否已被缓存，有点像。 我只需要一个（当然）运行一次的.load（）函数，如果它还没有执行，则意味着图像已被缓存。 至少对我的具体用法。
思考：也许我们应该绑定一个事件，检查DOM中的特定元素更改的变化。 因此，如果图像已经完成加载，则可以更改特定的DOM元素，因此我们可以检查之前和之后的值。
谢谢。
我最接近你想要的解决方案，也处理缓存的图像。
我已经创建了一个jQuery插件：
(function($){ var dummy_img = "dummy1x1.png", dummy_width = 1, dummy_height = 1; $("![]()
").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事件。 在触发时，清除轮询器，并执行传递的function。 - 当没有触发这些事件时，轮询器仍然能够检测到图像大小的变化。 加载缓存的图像时，元素的宽度/高度会更新，轮询器会检测到该宽度/高度。 在这种情况下，轮询器清除间隔，并执行传递的函数。
你可以使用onLoad函数作为Img标签
$(".img").load(function (){ // do something });
$('img').live('load', function () { alert("image loaded: "+this.src); });
使用jquery live方法跟踪负载。
这将运行是否缓存图像：
$(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);