Running the function every time the images are finished loading

Question

I wanted to know how to use jQuery to create a function that will run whenever the image is loaded. I want this feature to be called EVERY TIME, not just once. So if, for example, I have "image1.jpg" and it was loaded at the start of the page, the function will be called. Then, if I changed the image and it was loaded again after I changed it using Javascript, I want this function to “load” to run again. I tried the Jquery Load () function, but it runs only once, not the second time after replacing the image with another.

I also want this to happen, even if the image was cached too. This means that every time I change the src attribute 'src' for an image, I want some function to be activated - again, even if the image has 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 you can find out if there were cached images like. I just need to have a .load () function that will execute once (of course), and if it has not been executed, it means the image has been cached. At least for my specific use.

Thought: perhaps we need to bind an event that will check the change in the DOM for a specific change to the element. Therefore, it is possible that if the image was finished, then a specific DOM element will be changed, so we can check the values ​​before and after.

Thanks.

Answer 1

The next I get to your desired solution, as well as doing image caching.
I 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); 

Using:

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

Concept:

• Change the width and height to 1 (using the preloaded dummy image)
• Binding load and error event handlers
• Run the poller, which checks the width and height of the image.
• When the image is finished / failed to load, the load or error event will occur. After starting, the poller is cleared, and the function passed is executed.
• When none of these events is triggered, it can detect image resizing. When a cached image is loaded, the width / height of the element is updated, which is determined by the poller. In this case, poller clears the interval and performs the function passed.

Answer 2

you can use onLoad function for Img tag

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

Answer 3

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

Use the jquery live method to track the load.

Answer 4

Whether image caching will start or not:

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

Strictly speaking, you do not need to use call() , but it will allow you to use the image element in question in a more convenient way jquery-ish. Inside imgLoadFunc :

 var img = $(this);