Solved

How do I tell when an image has been fully loaded using javascript

Posted on 2009-07-09
8
322 Views
Last Modified: 2012-05-07
Hi, I have a website with some pretty large background images. On the first page I want to preload the backgrounds for the other pages into the cache using javascript.
eg

<SCRIPT LANGUAGE = JAVASCRIPT>
   img1 = new Image();
   img2 = new Image();
   img1.src = "imageName1.gif";
   img2.src = "imageName2.gif"
</SCRIPT>
Is there a way in javascript of knowing when these images have all been downloaded?

Many thanks

Matt
0
Comment
Question by:Bigshowmg
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 7

Expert Comment

by:nikhilmenon
ID: 24816181
Yes there is. If you have an image with the name, say "myimage01" in your html code, you can access it's onLoad method as shown in the code:
<html>
<body>
<img name="myimage01" src="whatever.gif" width="100" height="50" onLoad="your script here">
</html>

Open in new window

0
 
LVL 7

Expert Comment

by:nikhilmenon
ID: 24816212
Also, the image object also has an onLoad method so you could also use "img1.onload" in your code.
0
 

Author Comment

by:Bigshowmg
ID: 24816289
Thanks
IN RESPONSE TO YOUR FIRST POST
But the images that I'd be loading would not feature on the same page as the javascript. I just need to load them into the cache so other pages on the site don't take any time to download them. The first page will feature a loading image and I want this to disapear once the images have been downloaded.But the images that I'd be loading would not feature on the same page as the javascript. I just need to load them into the cache so other pages on the site don't take any time to download them. The first page will feature a loading image and I want this to disapear once the images have been downloaded.

AND THE SECOND
Could you give me an example of img1.onload? I assume it returns false until the image is loaded? Would I keep running a While loop until I get a TRUE or is there a less messy way?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:nikhilmenon
ID: 24816420
Actually it's more like this:

img.onload = onLoadHandler;

Which is your function name.
0
 

Author Comment

by:Bigshowmg
ID: 24816485
So the function will automatically be called once the image has loaded? (sorry if I'm being obvious).
Also do you know if this works across all browsers?

Cheers

Matt
0
 
LVL 6

Expert Comment

by:ahmad2121
ID: 24816524
onLoad is an EVENT, therefore it executes when that "event" occurs. Somehow I do not think this is what you want.

Basically what you are trying to do is begin the downloading of the images as soon as someone enters the first page.

This you can accomplish by putting them in IMG tags and setting the display to none

<img src="mybackground.png" width="100px" height="100px" style="display: none">

The browser will load the image. If you are using PHP or ASP, you can point it to a folder and have it automatically generate that HTML.

Or you can create an array in Javascript with the image names in it, and write a function to generate their img code onload.
0
 
LVL 7

Accepted Solution

by:
nikhilmenon earned 500 total points
ID: 24816529
Yes, the onload event would be triggered as soon as the image has loaded.

From my experience, this varies from browser to browser. Netscape (if still used) has trouble firing this. Also, some browsers do not fire this event if the image is being loaded from the cache. A possible bug with IE can be avoided by ensuring:

img.onload is specified BEFORE img.src tht is,


img.onload = onLoadHandler;
img.src = "foo.png";

Open in new window

0
 

Author Comment

by:Bigshowmg
ID: 24816576
Thats great, thanks for your help!!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JScript Error 2 55
Problem with PHP upload script 7 109
Javascript simple function doesn't work 6 116
Jquery slider [bxslider] - sliding problem 8 155
Facebook has became the #1 social media platform. People share many funny videos there, yet you don't know how to download them? Now you can download Videos from Facebook in just 3 simple steps.
This article was initially published on Monitis Blog, you can read it here . When it comes to deciding which approach to website performance monitoring is best for your business, unfortunately, like so many options in life . . . it depends. In t…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

697 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question