Question

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!")});

thanks

Answer 1

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;" />


$("#some-element").ready(function(){
      $("#preloader").show();
});