Remove background image on image load

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?

Community · Accepted Answer · 2017-05-23 10:24:37Z

5

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');
   }

});

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Jun 29, 2010 at 21:19

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steven Over a year ago

Ahh... so complete is the flag I'm looking for. I've been searching up and down the DOM spec and must have missed it! Cheers.

gblazex · Accepted Answer · 2010-06-29 21:42:38Z

-1

You don't need jQuery for this, you can do it with CSS.

.my-img-loader-class { background:url('placeholder-or-progress'); }

Or if you don't want to change your HTML:

#container img { background:url('placeholder-or-progress'); }

To show placeholders while images are loading in a specific div.

The way it works is the image element will show the placeholder image as its background, and when the src loads it will appear above the placeholder, so as to replace it nicely.

edited Jun 29, 2010 at 21:42

answered Jun 29, 2010 at 21:37

gblazex

50.3k12 gold badges100 silver badges92 bronze badges

1 Comment

Steven Over a year ago

This is what I'm already doing. I want the background to disappear once the image loads. Otherwise, a transparent image will show the background. @Doug Neiner's work did the trick.

Collectives™ on Stack Overflow

Remove background image on image load

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related