Question

I’m loading image tags via AJAX and inserting them with the conventional .html(content) function in jQuery alongside a bunch of other HTML. However, this question still applies if you’re loading a page from scratch. Now, I have a background image placeholder to be put there while the image loads. I want this background image to go away when the image loads.

Problem:

If I attach a conventional .load(function) event listener, I am concerned that the image might load before the hook is applied (putting the hook in a small JS <script> right after the image instead of in a $(function(){}) block might help a bit). I have yet to encounter such behaviour, but I know of nothing in the specification that prevents this from happening (since the image tag ought to be fully parsed before the hook is applied).

My current solution. Put the command in an inline onload= property within the image tag.

Is there a better way?

Answer 1

Up until a week or so ago I would have been lost too. Thankfully this answer to another question will help you out:

Basically put this in $():

$(function(){ 
   var img = $("#idofimage").load(function () { 
      /* your magic to swap out placeholder */ 
   });

   if (img[0].complete) {
     // Trigger the load handler if the image
     // is already loaded
     img.trigger('load');
   }

});