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（使用预加载的虚拟图像）
绑定load和error事件处理程序
运行一个轮询器，检查图像的宽度和高度。
当图片加载完成/失败时，将触发load或error事件。触发后，清除轮询器，并执行传递的功能。
当没有触发这些事件时，轮询器仍然能够检测到图像大小的变化。加载缓存的图像时，元素的宽度/高度会更新，轮询器会检测到该宽度/高度。在这种情况下，轮询器清除间隔，并执行传递的函数。

Answer 2

你可以使用onLoad函数作为Img标签

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

Answer 3

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

使用jquery live方法跟踪负载。

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

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

4 个答案: