Preloading images doesn’t work

@matthias_kApr 28.2004

Hi,

I want to preload some images for my website so that the rollover effects are smooth. I have based this code on a javascript I found on the net:

[code] var images = new Array(); var percent; function preload() { var numImages = preload.arguments.length;

for( i = 0; i < numImages; i++ ) { images[i] = new Image(); images[i].src = preload.arguments[i]; percent = parseInt(( i / numImages ) * 100); } } [/code]

Well… it just doesn’t work. The images which URL’s I pass as arguments to the function (which is called on onLoad) are NOT preloaded. The loop is passed as many times as there are images to load, but they aren’t actually loaded.

Any idea what’s wrong here?

to post a comment

JavaScript

20 Comments(s) _↴

@AdamGundryApr 28.2004 — #Bear in mind that image preloading is asynchronous, so the "percent" section of that code won't work, though it should still start preloading the images. Just because you have requested that the browser load some images doesn't mean it will do it in time for your rollovers to be ready.

Adam

@David_HarrisonApr 28.2004 — #You don't need to preload images, or even use JavaScript for rollovers when you can use CSS and do it the accessible way.

This works by simply moving the image. If you have some sidebar links that all have the same background you can turn them all into rollovers with about three lines of code.

This code however uses unique ID's for each link as an example.

[upl-file uuid=416c764d-323f-40ec-ac44-2b4818738f94 size=2kB]css image rollover.zip[/upl-file]

@matthias_kauthorApr 28.2004 — #It's not a classic rollover I'm using. It's more like that: I hover over a link and in the upper left corner of the site an image will appear according to the link hovered.

Check my site here:

http://www.digitalraid.com/main/index.php

Just hover over "profile" or "xbox" and you'll see what I mean. I takes a second to load the images when hovering (that's what I want to avoid).

@David_HarrisonApr 28.2004 — #Perhaps this [url=http://www.meyerweb.com/eric/css/edge/popups/demo.html]article [/url]will help a little then.

@matthias_kauthorApr 28.2004 — #Pure CSS, that's pretty nice! What does the div#links instruction mean?

@David_HarrisonApr 28.2004 — #The links in the sidebar are in a div tag with an id="links", the #links references that div tag and then there is some more CSS that references the links inside it.

@matthias_kauthorApr 28.2004 — #Ah alright, thanks for your help.

@David_HarrisonApr 28.2004 — #Happy to help. ?

@Mr_JApr 29.2004 — #Just in case you need a preloader take a look at a couple of my examples

www.huntingground.freeserve.co.uk/scripts/preload2.htm

@matthias_kauthorApr 29.2004 — #Hm weird, I tried using your script but load_image() is not executed. I output some text in the body of load_image() for "debugging" purposes but it seems load_image() is never called altho I explicitly call it on the onload event of the body.

Any idea?

@David_HarrisonApr 29.2004 — #I don't know how you tried to output text but you can't use document.write after the page loads. Just use an alert for testing, it's much simpler.

@Mr_JApr 29.2004 — #You added [B]onload="load_image()"[/B] to the opening BODY tag, yes.

Can you post a url or post your full page code here so I can take a look

@matthias_kauthorApr 30.2004 — #sure thing.

<i>
 </i>// preload.js
 
 &lt;!--
 // Realised by ApacheJeff
 // <a href="www.huntingground.freeserve.co.uk">www.huntingground.freeserve.co.uk</a>
 
 images    = new Array("img/ol1.jpg",
 "img/ol2.jpg",
 "img/ol3.jpg",
 "img/ol_profile.jpg",
 "img/ol_ring.jpg",
 "img/ol_xbox.jpg",
 "img/ol_cobe.jpg",
 "img/bg_l.jpg",
 "img/bg_r.jpg",
 "img/bg_u.jpg",
 "img/btt.jpg",
 "img/mainbg.jpg",
 "img/menu.jpg",
 "img/top.jpg");
 run_num   = images.length;
 img_total = images.length; // counter display
 
 a_index = 0;
 var preloaded = new Array();
 
 function load_image()
 {
 preloaded[a_index] = new Image();
 preloaded[a_index].onload = check_array();
 preloaded[a_index].src = images[a_index];
 document.write( "test" );
 }
 
 function check_array()
 {
 a_index++;
 
 <i>	</i>document.getElementById("info").innerHTML = "Loading " + img_total; // counter display
 <i>	</i>img_total--; // counter display
 <i>	</i>progress(); // progress bar function
 
 <i>	</i>if(a_index != run_num)
 <i>	</i>{
 <i>	</i>	setTimeout("load_image()",10);
 <i>	</i>}
 <i>	</i>else
 <i>	</i>{
 <i>	</i>	do_this(); // function to run
 
 <i>	</i>	document.getElementById("info").innerHTML=""; // counter display
 <i>	</i>	document.getElementById("progress_bar").style.visibility="hidden"; // progress bar display
 <i>	</i>	document.getElementById("bg_layer").style.visibility="hidden"; // progress bar display
 <i>	</i>}
 }
 
 // progress bar display
 Width=300; // width of bar
 step_size=Width / images.length; // calculates step size
 step=0;
 function progress()
 {
 step+=(step_size*1);
 document.getElementById("progress_bar").style.width=step;
 }
 
 function do_this()
 {
 alert("All the images have now been downloaded");
 }
 
 // add onload="load_image()" to the opening BODY tag
 
 //--&gt;

<i>
 </i>// index.php
 
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
 &lt;script language="javascript" src="preload.js"&gt;&lt;/script&gt;
 &lt;script language="javascript" src="imgswap.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body bgcolor="#E6E6E6" onLoad="load_image()"&gt;
 ...
 &lt;/body&gt;
 &lt;/html&gt;

@David_HarrisonApr 30.2004 — #You've used document.write after hte page has loaded. You CAN'T do that, use an alert instead.

@matthias_kauthorApr 30.2004 — #Well, but I don't think that's the reason the preloading doesn't work is it? And it doesn't work, I don't know why. The images are loaded just like without the script, one after another and are displayed immediately instead of all being loaded and then displayed all at once (that's what I expected).

@Mr_JApr 30.2004 — #[SIZE=1]

A change has been made to function load_image.

The second line should read [B]preloaded[a_index].onload = check_array;[/B] and not [B]preloaded[a_index].onload = check_array[COLOR=red]()[/COLOR] [/B];

Also you have left references in the script to the counter and progress bar.

I have amended the script for you, use the following in your JS file

<!--

// Realised by ApacheJeff

// www.huntingground.freeserve.co.uk

images = new Array("img/ol1.jpg",

"img/ol2.jpg",

"img/ol3.jpg",

"img/ol_profile.jpg",

"img/ol_ring.jpg",

"img/ol_xbox.jpg",

"img/ol_cobe.jpg",

"img/bg_l.jpg",

"img/bg_r.jpg",

"img/bg_u.jpg",

"img/btt.jpg",

"img/mainbg.jpg",

"img/menu.jpg",

"img/top.jpg");

run_num = images.length;

img_total = images.length; // counter display

a_index = 0;

var preloaded = new Array();

function load_image(){

preloaded[a_index] = new Image();

preloaded[a_index].onload = check_array;

preloaded[a_index].src = images[a_index];

//alert( "test" );

}

function check_array(){

a_index++;

//document.getElementById("info").innerHTML = "Loading " + img_total; // counter display
  //img_total--; // counter display
  //progress(); // progress bar function
 
  if(a_index != run_num)	{
   setTimeout("load_image()",10);
  }
  else	{
   do_this(); // function to run
 
   //document.getElementById("info").innerHTML=""; // counter display
   //document.getElementById("progress_bar").style.visibility="hidden"; // progress bar display
   //document.getElementById("bg_layer").style.visibility="hidden"; // progress bar display
  }

}

// progress bar display

Width=300; // width of bar

step_size=Width / images.length; // calculates step size

step=0;

function progress(){

step+=(step_size*1);

document.getElementById("progress_bar").style.width=step;

}

function do_this(){

alert("All the images have now been downloaded");

}

// add onload="load_image()" to the opening BODY tag

//-->

[/SIZE]

@matthias_kauthorApr 30.2004 — #Thanks a lot ? The script is processed now.

However, the result is not exactly what I expected. The images are still displayed *before* everything is downloaded completely. This gives the visitor still the chance to hover over a link whose rollover image has yet to be loaded. I would have expected that the loaded images appear all at once *after* the message box, in fact when all downloading is done. Shouldn't this be the case?

Maybe it's my browser (avant browser, it uses the IE6 engine tho)? Can you check if it's working for you? The link's http://www.digitalraid.com/main/index.php

Thanks a ton.

@Mr_JApr 30.2004 — #No preloading is any good if it is possible to call the images before they have been downloaded

What you would have to do is prevent them from being used, in your case the mouseovers have to be disabled until the preloading is done.

I have amended your page so that the mouseovers are in effect disabled until the last image has preloaded.

I have also amended your image swap functions as all of them are not needed.

To simulate the preloading on your PC change the timeout at line

setTimeout("load_image()",10);

to about 5 seconds, 5000.

The images will not show when you mouseover the three links cobe, xbox, and profile until the preloading is done.

If you are wanting your background images not to show until all have been preloaded as well then you would have to use something like the CSS visibility attribute to hide them until all are loaded, then make then all visible

Please note that I have only used three images for this example

[SIZE=1]

<HTML>

<HEAD>

<TITLE>Untitled Document</TITLE>

<LINK href="style.css" type=text/css rel=stylesheet>

<SCRIPT language=javascript>



</SCRIPT>

</HEAD>

<BODY bgColor=#e6e6e6 onload=load_image()>

<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD vAlign=center align=middle>

<TABLE cellSpacing=0 cellPadding=0 width=743 border=0>

<TBODY>

<TR>

<TD width=229 height=209>

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD width=107 background="img/ol1.jpg" height=98> </TD>

<TD width=122 background="img/ol2.jpg" height=98> </TD>

</TR>

<TR>

<TD width=107 background="img/ol3.jpg" height=111> </TD>

<TD width=122 height=111><IMG height=111 src="img/ol_ring.jpg" width=122></TD>

</TR>

</TBODY>

</TABLE>

</TD><A name=top></A>

<TD width=514 background="img/top.jpg" height=209> </TD>

</TR>

</TBODY>

</TABLE>

<TABLE cellSpacing=0 cellPadding=0 width=743 border=0>

<TBODY>

<TR>

<TD style="BACKGROUND-IMAGE: url(img/menu.jpg); BACKGROUND-REPEAT: no-repeat" vAlign=top align=middle width=229>

<TABLE class=link height=261 cellSpacing=0 cellPadding=0 width=229 border=0>

<TBODY>

<TR>

<TD width="34%" height=59> </TD>

<TD vAlign=center align=middle width="66%"> </TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A href="http://www.digitalraid.com/main/index.php#">Home</A></TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A onmouseover=showImage(0) href="http://www.digitalraid.com/main/index.php#">Cobe</A></TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A onmouseover=showImage(1) href="http://www.digitalraid.com/main/index.php#">Xbox</A></TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A href="http://www.digitalraid.com/main/index.php#">Audio</A></TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A onmouseover=showImage(2) href="http://www.digitalraid.com/main/index.php#">Profile</A></TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A href="http://www.digitalraid.com/main/index.php#">Web</A></TD>

</TR>

<TR>

<TD> </TD>

<TD vAlign=center align=middle> </TD>

</TR>

</TBODY>

</TABLE>

</TD>

<TD width=5 background="img/bg_l.jpg"> </TD>

<TD width=471 background="img/mainbg.jpg">

<TABLE height="100%" cellSpacing=0 cellPadding=10 width="100%" border=0>

<TBODY>

<TR>

<TD></TD>

</TR>

</TBODY>

</TABLE>

</TD>

<TD width=38 background="img/bg_r.jpg"> </TD>

</TR>

</TBODY>

</TABLE>

<TABLE cellSpacing=0 cellPadding=0 width=743 border=0>

<TBODY>

<TR>

<TD width=229 height=25> </TD>

<TD width=90 height=25><A href="http://www.digitalraid.com/main/index.php#top">

<IMG height=25 src="img/btt.jpg" width=90 border=0></A></TD>

<TD width=424 background="img/bg_u.jpg"> </TD>

</TR>

</TBODY>

</TABLE>

</TD>

</TR>

</TBODY>

</TABLE>

</BODY></HTML>

[/SIZE]

@matthias_kauthorMay 01.2004 — #Ah I see, that's a good idea. Or maybe I can do the image downloading on one page and display some kind of progress bar and forward to the main page afterwards. Well, I'm gonna try this and that and see what comes best.

Thanks for your time, appreciated.

@Mr_JMay 01.2004 — #Have a try at this one.

Only the progress bar is shown until all images are downloaded then your page is shown

[SIZE=1]

<HTML>

<HEAD>

<TITLE>Untitled Document</TITLE>

<LINK href="style.css" type=text/css rel=stylesheet>

<SCRIPT language=javascript>



</SCRIPT>

</HEAD>

<BODY bgColor=#e6e6e6 onload=load_image()>

<div id="bg_layer" style="position:absolute;left:180;top:100;width:300;background-color:#8e8462;font-size:10"> </div>

<div id="progress_bar" style="position:absolute;left:180;top:100;width:0;background-color:#c9bda9;z-index:2;font-size:10"> </div>

<div id="main" style="visibility:hidden">

<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD vAlign=center align=middle>

<TABLE cellSpacing=0 cellPadding=0 width=743 border=0>

<TBODY>

<TR>

<TD width=229 height=209>

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD width=107 background="img/ol1.jpg" height=98> </TD>

<TD width=122 background="img/ol2.jpg" height=98> </TD>

</TR>

<TR>

<TD width=107 background="img/ol3.jpg" height=111> </TD>

<TD width=122 height=111><IMG height=111 src="img/ol_ring.jpg" width=122></TD>

</TR>

</TBODY>

</TABLE>

</TD><A name=top></A>

<TD width=514 background="img/top.jpg" height=209> </TD>

</TR>

</TBODY>

</TABLE>

<TABLE cellSpacing=0 cellPadding=0 width=743 border=0>

<TBODY>

<TR>

<TD style="BACKGROUND-IMAGE: url(img/menu.jpg); BACKGROUND-REPEAT: no-repeat" vAlign=top align=middle width=229>

<TABLE class=link height=261 cellSpacing=0 cellPadding=0 width=229 border=0>

<TBODY>

<TR>

<TD width="34%" height=59> </TD>

<TD vAlign=center align=middle width="66%"> </TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A href="http://www.digitalraid.com/main/index.php#">Home</A></TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A onmouseover=showImage(0) href="http://www.digitalraid.com/main/index.php#">Cobe</A></TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A onmouseover=showImage(1) href="http://www.digitalraid.com/main/index.php#">Xbox</A></TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A href="http://www.digitalraid.com/main/index.php#">Audio</A></TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A onmouseover=showImage(2) href="http://www.digitalraid.com/main/index.php#">Profile</A></TD>

</TR>

<TR>

<TD height=25> </TD>

<TD vAlign=center align=middle><A href="http://www.digitalraid.com/main/index.php#">Web</A></TD>

</TR>

<TR>

<TD> </TD>

<TD vAlign=center align=middle> </TD>

</TR>

</TBODY>

</TABLE>

</TD>

<TD width=5 background="img/bg_l.jpg"> </TD>

<TD width=471 background="img/mainbg.jpg">

<TABLE height="100%" cellSpacing=0 cellPadding=10 width="100%" border=0>

<TBODY>

<TR>

<TD></TD>

</TR>

</TBODY>

</TABLE>

</TD>

<TD width=38 background="img/bg_r.jpg"> </TD>

</TR>

</TBODY>

</TABLE>

<TABLE cellSpacing=0 cellPadding=0 width=743 border=0>

<TBODY>

<TR>

<TD width=229 height=25> </TD>

<TD width=90 height=25><A href="http://www.digitalraid.com/main/index.php#top">

<IMG height=25 src="img/btt.jpg" width=90 border=0></A></TD>

<TD width=424 background="img/bg_u.jpg"> </TD>

</TR>

</TBODY>

</TABLE>

</TD>

</TR>

</TBODY>

</TABLE>

</div>

</BODY></HTML>

[/SIZE]

Also in #JavaScript _↴

Three level sliding menu Can you identify this error?What does this mean

Success!

Help @matthias_k spread the word by sharing this article on Twitter...

Tweet This

Preloading images doesn’t work

20 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Preloading images doesn’t work

20 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #JavaScript _↴