<BODY onload="load_image()"> <h1>Image Preloader MKII</h1> <div id="bg_layer" style="position:absolute;left:180;top:145;width:300;background-color:#8e8462;font-size:10"> </div> <div id="progress_bar" style="position:absolute;left:180;top:145;width:0;background-color:#c9bda9;z-index:2;font-size:10"> </div> <center> <div id="info"></div> <BR><BR> <img name="display_img" src="spacer.gif" width=50 height=50> </center> <font size="2">The thumbnail display is only a visual reference for this example to show the images being preloaded.</font> <P>A common mistake when preloading images is to simply create an Image object and assign a Source, but if the image is used before it has loaded, this preloading will have no effect at all. To make preloading work properly, the images have to complete loading before they are used. <P>Typical examples of this would be where images are shown at random or a slideshow script.</P> <P>The Image Preloader MKII ensures that all images are downloaded before they can be displayed.</P> <P>A couple of additional features are the ability to see how many images remain to be downloaded and the inclusion of a progress bar to let your visitor know that something is happening.</P> <P>The preloader works by creating a new image object that is assigned an onload event so that when the current image has preloaded a function is run to check for the next image in the array.</P> <P>Once all the images are preloaded your function is run.</P> <P>If you want to preload in the background without the <font color="#800000">counter</font> or <font color="#0000FF">progress bar</font> comment out the appropriate lines <P><script language="javascript"><BR> <!--<BR> // Realised by ApacheJeff<BR> // www.huntingground.freeserve.co.uk<BR> <BR> images=new Array("pic01.jpg","pic02.jpg","pic03.jpg","pic04.jpg","pic05.jpg")<BR> <BR> <font color="#800000">img_total=images.length</font> // counter display<BR> <BR> a_index=0<BR> var preloaded=new Array()<BR> <BR> function load_image(){<BR> preloaded[a_index]=new Image()<BR> preloaded[a_index].onload=check_array<BR> preloaded[a_index].src=images[a_index]<BR> }<BR> <BR> function check_array(){<BR> a_index++<BR> <BR> <font color="#800000">document.getElementById("info").innerHTML="Loading "+img_total</font> // counter display<BR> <font color="#800000">img_total--</font> // counter display<BR> <font color="#0000FF">progress()</font> // progress bar function<BR> <BR> if(a_index!=images.length){<BR> setTimeout("load_image()",10)<BR> }<BR> else{<BR> do_this() // function to run<BR> <BR> <font color="#800000">document.getElementById("info").innerHTML=""</font> // counter display<BR> <font color="#0000FF">document.getElementById("progress_bar").style.visibility="hidden"</font> // progress bar display<BR> <font color="#0000FF">document.getElementById("bg_layer").style.visibility="hidden"</font> // progress bar display<BR> <BR> }<BR> <BR> }<BR> <BR> // progress bar display<BR> <font color="#0000FF"> Width=300 // width of bar<BR> step_size=Width / images.length // calculates step size<BR> step=0<BR> function progress(){<BR> step+=(step_size*1)<BR> document.getElementById("progress_bar").style.width=step<BR> }<BR> </font> <BR> function do_this(){<BR> alert("All the images have now been downloaded")<BR> }<BR> <BR> // add onload="load_image()" to the opening BODY tag<BR> <BR> //--><BR> </script> <P><!--display count--><BR> <font color="#800000"><div id="info"></div></font> <P><!-- progress bar display--><BR> <font color="#0000FF"> <div id="bg_layer" style="position:absolute;left:180;top:100;width:300;background-color:#8e8462;font-size:10"> </div><BR> <div id="progress_bar" style="position:absolute;left:180;top:100;width:0;background-color:#c9bda9;z-index:2;font-size:10"> </div> </font> <p><font face="Arial">Diese Seite verwendet Frames. Frames werden von Ihrem Browser aber nicht unterstützt.</font></p> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-11999379-1"); pageTracker._trackPageview(); } catch(err) {}</script> </body>