Callback for image loading with jQuery
While I was doing the demo for my previous post about “simulating image pan jQuery plugin” I’ve noticed that the first time that I was loading the script the actions were executed before even loading the image and resulting in failure. This days at my job I was doing a gallery plugin in jQuery and notice the same problem.
Sometimes you have to load dynamic images as a result of a AJAX request, and you want to be able to do things only after the image has finish loading. In this case the ready() function, which is a wrapper for the window.onload() function is not usefull, because it applies to the elements present at the beginning.
In this scenario you make a request and receive as a string a path for a new image you have to load. This is usefull if you have big images and want to wait until the images are loaded before doing anything else.
$(document).ready( function (){
$.get(
'test.php',
function( data ){
//console.log(data); // ["test.jpg"]
var _image = new Image();
_image.src = data;
_image.id = 'newImageId';
$(_image).load( function(){
//once image is loaded add it to the div and remove the preloading
$("#imageContainer").append( _image ).removeClass('loading');
// do other stuff
_image.alt = "test image";
});
}
);
});
I’ve tested it in IE, FF, Chrome and works with cache enabled/disabled. The secret, not a big one, is the usage of AJAX load() function which does a GET request in the background and allows a callback. The purpose of the load function is to inject some html code in the current page. If you want to change the src value for a current image and do a callback it will be a good idea to pass a random string to the GET request as your browser could cache the image name and content.
About this entry
You’re currently reading “Callback for image loading with jQuery,” an entry on Elzo Valugi
- Published:
- 9.11.09 / 10pm
- Category:
- Javascript, jQuery
- Tags:
- callback, image, jQuery, loading, preloading
3 Comments
Jump to comment form | comments rss [?] | trackback uri [?]