每次图像加载完成后运行一个功能

Question

我想知道如何使用JQuery创建一个在每次图像加载完成后运行的函数.我希望该函数每次调用一次,而不仅仅是一次.因此,例如,如果我有"image1.jpg"并且它已在页面启动时加载,则将调用该函数.然后,如果我更改图像并在使用Javascript更改后再次加载图像,我希望再次触发"加载"功能.我尝试了Jquery Load()函数,但它只运行一次,而不是第二次用另一个图像替换后.

我也希望即使图像也被缓存,偶数也会发生.这意味着每次我更改图像的'wrc'属性时,我都希望启动一个特定的功能 - 即使图像已经被缓存了.

例:

$("#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. 当没有触发这些事件时,轮询器仍然能够检测到图像大小的变化.加载缓存的图像时,元素的宽度/高度会更新,轮询器会检测到该宽度/高度.在这种情况下,轮询器清除间隔,并执行传递的函数.