DelphiFAQ Home Search:

How can I execute javascript code when an image is loaded?

 

comments2 comments. Current rating: 5 stars (1 votes). Leave comments and/ or rate it.

Question:

I need to display a certain part of my page after a big picture is loaded. How can I catch this event?

Answer:

This can be done easily with the onload and onerror event handlers that all IMG elements have. In those handlers you can check whether the images is loaded by reading the complete property.

Here's an example for images with event handlers:

<img onload="alert(this.src + ' loaded completely')" src="pie.gif" name=sampleImage>

...
// To check whether a certain image is loaded:
if (document.images['sampleImage'].complete) {
  alert('yes, it is loaded already');
}

Content-type: text/html

Comments:

2006-06-06, 22:03:03
anonymous from Hong Kong  
rating
2014-12-17, 04:15:12
anonymous  
that! You was wrong about keep telling me that the folnlwiog code would be OK and it will be called onload event:function f() { alert( 'message 1' ); }window.onload = f();alert( 'message 2' );I was keep telling you that will NOT be run onload event. Instead you should call like this: window.onload = f;And regarding beeing savvy .let's say that I don't need to be considered savvy.

 

 

NEW: Optional: Register   Login
Email address (not necessary):

Rate as
Hide my email when showing my comment.
Please notify me once a day about new comments on this topic.
Please provide a valid email address if you select this option, or post under a registered account.
 

Show city and country
Show country only
Hide my location
You can mark text as 'quoted' by putting [quote] .. [/quote] around it.
Please type in the code:

Please do not post inappropriate pictures. Inappropriate pictures include pictures of minors and nudity.
The owner of this web site reserves the right to delete such material.

photo Add a picture: