Take the 2-minute tour ×

i'm trying to make a simple image-preloader for just ONE image. it should load an image and - if finished - fire an event for displaying it. what's the simplest method to do this?

i only know the pure javascript solution, like document.createElement("img") - but what's the best method using jquery?

what i've got so far (but dunno if it's the optimal way):

var img = $("<img src='/images/myPic.jpg'>");
img.bind("load", function(){alert("loaded!")});


share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

If I understand correctly I would write the image in the template or master page or whatever using with a css attribute and then an event in jquery to display it.

<img id="preloader" src="/myimg.jpg" style="display:none;" />

share|improve this answer
add comment

I've never had to do this with jQuery as I either do it manually in JS:

var img = new Image();
img.onLoad = function() {alert("Image has been loaded!");};
img.src = "path/to/img.ext";

Or, if I'm already using jQuery for the project, I'll just use Thickbox. If you look at its source, it has something similar to the above.

To display it, have a pre-defined div in your source file that is initially set to display: none;, then use JS to set its content to the image and change it to be visible. You can see an example of this at pcgalore.com, the rotating quote banner uses it.

share|improve this answer
add comment

I would use jquery's .on() method and attach it to the selector:

<img id="preLoader" src="/images/myPic.jpg" alt="My Pic" style="display: none;" />

$('#preLoader').on('load', function () {
share|improve this answer
add comment

Your Answer


