Execute JavaSCript code after image preload

Question

I'm trying to create some kind of callback code which gets executed after an image has been preloaded.

My JS code is as follows:

<script type='text/javascript'>
d=document;
window.onload=function()
{
   if (d.images)
   {
      d.getElementById('preload').style.display='block';
      i1=new Image;
      i1.src="http://link_to_image";
      d.getElementById('preload').style.display='none';
   }
}
</script>

So in my example, d.getElementById('preload').style.display='none'; should be executed after the image has been fully loaded into the cache.

Any help on how to achieve this? Please only standalone JavaScript solutions without library/plugin requirements.

I just found out that setInterval("if(i1.complete){...}", 500) is a good solution. Edit: But not as good as the suggested solutions below. — user226335
– user226335, Commented Feb 4, 2010 at 15:07
Yeah, you should avoid the string argument to setInterval/setTimeout; pass a function() { ... } in instead in preference. Also there's no complete attribute, only readyState (and that's non-standard, so onload is still best). Also you can probably lose the if (document.images) test, as the last browser not to support it was Netscape 2! :-) — bobince
– bobince, Commented Feb 4, 2010 at 15:50

Tim Down · Accepted Answer · 2010-02-04 15:01:32Z

6

I'm not sure how reliable the image onload event is in all browsers, so I'd test this very carefully:

var i1 = new Image();

i1.onload = function() {
   d.getElementById('preload').style.display = "none";
};

i1.src = "http://link_to_image";

answered Feb 4, 2010 at 15:01

Tim Down

326k76 gold badges461 silver badges546 bronze badges

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

Comments

Community · Accepted Answer · 2015-08-20 04:41:57Z

1

Have a look at this article, i think it will help: link text

like many other objects in JavaScript, the Image() object also comes with some event handlers. The most useful of these is undoubtedly the onLoad() handler, which is invoked when the image has completed loading.

edited Aug 20, 2015 at 4:41

CommunityBot

11 silver badge

answered Feb 4, 2010 at 14:56

MoJo2600

4093 silver badges10 bronze badges

Comments

Ben · Accepted Answer · 2010-02-04 15:00:40Z

1

Use onload in the image tag itself.

<img src="http://link_to_image" onload="alert('IMG LOADED')" />

answered Feb 4, 2010 at 15:00

Ben

1,12713 silver badges21 bronze badges

Collectives™ on Stack Overflow

Execute JavaSCript code after image preload

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related