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

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
BigshowmgAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nikhilmenonCommented:
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
nikhilmenonCommented:
Also, the image object also has an onLoad method so you could also use "img1.onload" in your code.
0
BigshowmgAuthor Commented:
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
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

nikhilmenonCommented:
Actually it's more like this:

img.onload = onLoadHandler;

Which is your function name.
0
BigshowmgAuthor Commented:
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
ahmad2121Commented:
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
nikhilmenonCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BigshowmgAuthor Commented:
Thats great, thanks for your help!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.