每次图像加载完成时运行一个函数 [英] Run a function each time an images has finished loading

问题描述

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

I wanted to know how to use JQuery to create a function that will run on each time an image has been finished loading. I want that function to be called EACH TIME, not only once. So if, for example, I have "image1.jpg" and it was loaded on page start, the function will be called. Then, if I change the image and it was loaded again after I changed it using Javascript, I want that 'loaded' function to fire again. I tried Jquery Load() function, but it only run once, not the second time after the image has been replaced with another one.

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

I want also that the even will happen even if the image has been cached too. That means that every time I change thew 'src' attribute of the image, I want that a specific function to fire up - again, even if the image is already been cached.

示例:

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

我希望在发生这种情况时，即使图像已经被缓存，该功能也会触发.我认为有可能知道图像是否已被缓存.我只需要有一个.load()函数即可运行一次(当然)，并且，如果尚未执行，则意味着图像已被缓存.至少针对我的特定用途.

I want that when this happens, even if the image is already cached the function will fire. I think that it's possible to know if the images has been cached, kind of. I just need to have an .load() function that will run once (of course), and if it hasn't been executed, it means that the image has been cached. At least for my specific usage.

思考:也许我们应该绑定一个事件，该事件检查DOM中的更改以查找特定元素更改.因此，也许如果图像已完成加载，则将更改特定的DOM元素，以便我们可以检查之前和之后的值.

Thought: maybe we should bind an event that checked a change in the DOM for a specific element change. So maybe if the image has been finished loading, a specific DOM element is changed, so we can check the before and after values.

谢谢.

推荐答案

我最接近您想要的解决方案，也可以处理缓存的图像.
我创建了一个jQuery插件:

The closest I get to your desired solution, to also deal with cached images.
I've created a jQuery plugin:

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

1. Change width and height to 1 (using the preloaded dummy image)
2. Bind load and error event handlers
3. Run a poller which checks for the width and height of the image.
4. When the image has finished/failed loading, the load or error event will be triggered. Upon triggering, the poller is cleared, and the passed function is executed.
5. When none of these events are fired, the poller is still able to detect a change in image size. When the cached image is loaded, the width/height of the element updates, which is detected by the poller. In this case, the poller clears the interval, and executes the passed function.

这篇关于每次图像加载完成时运行一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！