Pre Loading For Pictures

autopost · Jan 9, 2008

Hi: 
 
I have two questions, but first, just a bit of an explanation. 
 
I have been requested to design a Home Page for a visitor to Canada, from Germany. She wants the pages to show a great number of pictures and in a "slideshow" format. Approximately 75 pictures to be displayed over 5 pages. Now the questions: 
 
1. Can someone please give me the HTML coding or the JavaScript that will make the viewer's browser Download  the pictures before it displays?? 
 
2. With this coding, should it be placed only on the opening page?? And if so, will it then Download  all the pictures required for the 5 pages? Or should the code be placed on each page so only the relative pictures for that page are pre loaded and cuts down the loading time for the viewer?? 
 
Thanks, 
 
WebspannerWebspanner, 
Code is as follows: 
 
<script language="javascript"> 
 
pic1 = new Image(); 
pic1.src = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"pic1.gif"; 
 
</script> 
 
(where pic1 one is the name of your image...) 
 
Just repeat this for all images you wish to preload. Then, where you want them to appear on your page, just put: 
 
<script> 
document.write('<img src=http://www.htmlforums.com/archive/index.php/"' + pic1.src + '">'); 
</script> 
 
As for your other question, no way anyone is gonna wait for all 75 images to preload on the front page. Split them out over the 5 pages.

This code is to be put at the opening page and it has this cool loading bar... really proffesional plus a redirection after that!!! but be very careful... just because you have a pre loader does'nt mean that you don't have to optimise your pictures hey? this ones from my frth coming site. It comes with two images too: red.gif and black.gif (attached) 
 
any way here it is: 
 
<html> 
<head> 
<title>loading nqo's site... please wait...</title> 
<script language="JavaScript1.1" type="text/javascript"> 
<a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"black.gif" 
barImg[1] = new Image(1,1) 
barImg[1].src = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"red.gif" 
var imgtoNow = new Array(),coverage = Math.floor(barWidth/imgtoPreload.length),currCount = 0 
var loaded = new Array(),i,covered,timerID 
var barWidthL = barWidth%coverage 
} 
function loadImages() { 
for (i = 0; i < imgtoPreload.length; i++) { 
imgtoNow = new Image() 
imgtoNow.src = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/imgtoPreload">http://www.htmlforums.com/archive/index ... gtoPreload</a> 
} 
for (i = 0; i < imgtoNow.length; i++) { 
loaded = false 
} 
checkLoad() 
} 
function checkLoad() { 
if (currCount == imgtoNow.length) { 
location.replace(goTo) 
return 
} 
for (i = 0; i <= imgtoNow.length; i++) { 
if (loaded == false && imgtoNow.complete) { 
loaded = true 
eval("document.img" + currCount + ".src=http://www.htmlforums.com/archive/index.php/barImg[1].src") 
currCount++ 
} 
} 
timerID = setTimeout("checkLoad()",10) 
} 
//--> 
</script> 
</head> 
<body bgcolor="black" text="white" link="white" alink="white" vlink="white"> 
<center> 
loading nqo's site... please wait... 
<script language="JavaScript1.1" type="text/javascript"> 
 
</script> 
If the progress bar stops or does not move, please <a href=http://www.htmlforums.com/archive/index.php/"www20.brinkster.com/nqobizitha/index3.html">click here</a>... 
</center> 
</body> 
</html>Hi nqobizitha: 
 
Thanks very much for all the coding and for taking the time to answer my posting for help. 
 
Unfortunately, I'm afraid this doesn't seem to work, probably because of the "slideshow" format. 
 
Inch has given me some coding to try and he's working with me on that. 
 
Thanks again, much apprecitated. 
 
Regards, 
Webspanner

Pre Loading For Pictures

autopost

Guest