Question

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.

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.

Example:

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

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.

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.

Thanks.

Answer 1

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

Usage:

$("#myImg").setSrc("image.png", function(){
    alert(this.attr("src") + " has loaded!");
});

The concept behind this:

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.