每次图像加载完成后运行一个函数

Question

我想知道如何使用JQuery创建一个函数，每次图像加载完成后都会运行该函数。我希望这个函数被称为每个时间，不仅一次。因此，例如，如果我有“image1.jpg”并且它在页面启动时加载，则会调用该函数。然后，如果我更改图像，并在使用Javascript更改后再次加载图像，我希望“加载”函数再次触发。我试过Jquery Load（）函数，但它只运行一次，而不是图像被另一个替换后的第二次。

我还希望即使图像已被缓存，甚至也会发生。这意味着每次我更改图像的'src'属性时，我都希望特定的函数能够启动 - 即使图像已被缓存，也是如此。

例子：

$("#myimageselector").attr("src", "http://domain.com/the_new_image.jpg"); 

我想，当发生这种情况，即使图像已经缓存功能将闪光。我认为有可能知道这些图像是否已被缓存。我只需要有一个将运行一次（当然）的.load（）函数，如果它没有被执行，这意味着图像已被缓存。至少对于我的具体用法。

想法：也许我们应该绑定一个事件，检查DOM中的变化以进行特定的元素更改。所以也许如果图像已经完成加载，一个特定的DOM元素被改变，所以我们可以检查前后值。

谢谢。

Answer 1

最接近我得到你想要的解决方案，也处理缓存的图像。
我已经创建了一个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. 变化的宽度和高度为1（使用预加载的伪图像）
2. 绑定load和error事件处理程序
3. 运行一个轮询器，检查图像的宽度和高度。
4. 当图像加载完成/失败时，会触发load或error事件。触发后，轮询器被清除，并执行传递的功能。
5. 当这些事件都未被触发时，轮询器仍然能够检测到图像大小的变化。加载缓存图像时，元素的宽度/高度会更新，这由轮询器检测到。在这种情况下，轮询器清除间隔，并执行传递的函数。

Answer 2

可以使用的onLoad功能IMG标记

$(".img").load(function(){ 
    // do something 
}); 

Answer 3

$('img').live('load', function() 
{ 
    alert("image loaded: "+this.src); 
}); 

使用jQuery活的方法来跟踪负荷。

Answer 4

这将运行图像是否被缓存与否：

$(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);