Forum Moderators: open
"I needed to make a beautiful splash page and the main centered image was over 100 KB long. It was an animated GIF file with about 50 frames and there was no any way to make the size lower. "
So the problem he was showing you how to overcome in his tutorial was just about the same as the slideshow. So I thought I had my answer on how you create a progressive preloader in JavaScript. His code was as follows.
<HTML><HEAD>
<SCRIPT>
load_img = new Image();
load_img.src = 'big.gif';
function replace_img(){
if (load_img.complete) {
document['target_img'].src=load_img.src;
clearInterval(timerid);
}
}
timerid = setInterval("replace_img()", 500);
</SCRIPT>
</HEAD>
<BODY>
<IMG name=target_img SRC=small.gif>
</BODY>
</HTML>
What I am failing to understand is aware is big.gif' 2 to 50 are you supposed to have nested if statements and he is only showing you one statement without a nested if. What I would expect to see on that page without a progressive preloader would be this.
load_img1 = new Image();
load_img1.src = 'big1.gif';
load_img2 = new Image();
load_img2.src = 'big2.gif';
load_img3 = new Image();
load_img3.src = 'big3.gif';
And so on all the way to big50.gif' . But I do not see how you get what I would expect from his code so could you please explain it to me.
Incidentally I thought that side had its own forum so I try to join but it does not seem active anymore or something since the registration did not work for me. So that is why I'm asking this question here.
Thank you in advance.
Marc
As it is an animated gif only 1 file is needed. In this case big.gif which contains all the 50 images. So there is no need for big1.gif to big50.gif. Your browser will display all the images in the animated gif sequentially depending on the settings specified within the file.
What the script does is that it displays a small (in size) image which is replaced at the time the big image has completely been retrieved from the server. At that moment the browser takes over displaying the 50 images sequentially.
Arjan
load_img1 = new Image();
load_img1.src = 'big1.gif';
var c = 2;
function PreLoadNext(){
if (eval('load_img' + c ).complete){
eval('load_img' + c ) = new Image();
eval('load_img' + c ).src = eval('big' + c );
c++;
}
if ( c == 50 )(
clearInterval(timerid);
}
}
timerid = setInterval("PreLoadNext()", 500);
(Pretty much) never use
evalTry this (not tested though)
var loadImage = new Image;
var loadImage.src = 'big1.gif';
var c = 1;
var cStop = 50;var timerId = setInterval("preLoadNext()", 500);
function preLoadNext()
{
if(loadImage.complete)
loadImage.src = 'big'+ (++c) +'.gif';
if(c == cStop)
clearInterval(timerId);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>ex</title>
<script type="text/javascript" language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="wb1.jpg"
var image2=new Image()
image2.src="wb2.jpg"
var image3=new Image()
image3.src="wb3.jpg"
var image4=new Image()
image4.src="wb4.jpg"
var image5=new Image()
image5.src="wb5.jpg"
//variable that will increment through the images
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if (step<5)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
//-->
</script>
</head>
<body onload="slideit()" >
<center><img src="wb1.jpg" name="slide" width="280" height="418" /> </center>
</body>
</HTML>
This code runs perfectly and has no errors or warnings in the Firefox JavaScript console nor does the HTML have any warnings or errors in tidy. If I can keep my slideshow to 15 kB images I probably could live without my progressive preloader however it will be nice to learn something more about JavaScript and a progressive preloader for a slideshow is something I might want in the future for more bandwidth demanding slideshows. My best shot at faithfully implementing the above persons code snippet is below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>ex</title>
<script type="text/javascript" language="JavaScript1.1">
<!--
var imageW = new Image;
var imageW.src = 'wb1.jpg';
var c = 1;
var cStop = 5;
var timerId = setInterval("preLoadNext()", 500);
function preLoadNext()
{
if(imageW.complete)
imageW.src = 'wb'+ (++c) +'.jpg';
if(c == cStop)
clearInterval(timerId);
}
//variable that will increment through the images
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if (step<5)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
//-->
</script>
</head>
<body onload="slideit()" >
<center><img src="wb1.jpg" name="slide" width="280" height="418" /> </center>
</body>
</HTML>
My slideshow does not run with this script. The preloader has changed the slideshow script remains the same. After a while looking over at his script a question of logic arose in my mind. Does it make sense in his equivalent of this line "imageW.src = 'wb'+ (++c) +'.jpg' " to have the right side of this equation dynamically created and not have the left side. I mean I have not created array so how can I keep stuffing more images into "imageW.src ". The above code gives no HTML tidy errors or warnings but does have the following problems pointed out in the Firefox JavaScript console. "Warning: redeclaration of var imageW , Line: 7, Column: 4 Source Code: var imageW.src = 'wb1.jpg';" also on that same line "Error: missing ; before statement Line: 7, Column: 10 Source Code: var imageW.src = 'wb1.jpg';" and one more that makes no sense "Error: slideit is not defined". I tried to address everything I could come up with by myself in the code snippet below. I get almost identical errors in the JavaScript console in the below snippet. One other thing my code that works top of this reply works so well I am wondering if I got this necessity wrong for in the needing a progressive preloader for a slideshow. Does the onload event handler in the body tag which calls for execution of my slideshow function really wait for all my preloading to take place before executing my slideshow I just can't tell with the size images I'm using. My connection speed is only 49.2 kB but the slideshow really works well only showing a delay loading the first image of 15 kB and showing no delay on the last four 15 kB images. And 2.5 seconds isn't even enough time between slides. But as I have stated before I really would like to get this working to understand JavaScript better. So I would appreciate any help.
Marc
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>ex</title>
<script type="text/javascript" language="JavaScript1.1">
<!--
var w1 = new Image();
var w1.src = 'wb1.jpg';
var c = 2;
var cStop = 5;
var timerId = setInterval("preLoadNext()", 500);
function preLoadNext()
{
if('w' + c '.complete')
'w' + c + '.src' = 'new' + 'w'+ (++c) +'.jpg';
if(c == cStop)
clearInterval(timerId);
}
//variable that will increment through the images
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if (step<5)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
//-->
</script>
</head>
<body onload="slideit()" >
<center><img src="wb1.jpg" name="slide" width="280" height="418" /> </center>
</body>
</HTML>
If it fits your needs, I'll do any explaning needed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<title>ex</title>
<script type="text/javascript" language="JavaScript1.1">window.onload = slideit;
/*====CONFIG===============================*/
slideit.srcs =
[
"image01.gif",
"image02.gif",
"image03.gif",
"image04.gif"
]slideit.delays = { normal:2500, checking: 500 };
slideit.index = 0;
/*=========================================*/slideit.preloader = new Image;
slideit.preloader.src = slideit.srcs[slideit.index];
slideit.delays.current = slideit.delays.normal;function slideit()
{
/* If image available, proceed.
If not, speed up loop while waiting.
*/
var state = slideit.preloader.complete? "normal":"checking";
if(state == 'normal')
{
/* Change display image */
document.images.slide.src = slideit.srcs[slideit.index];
/* Increment index. Restrict to available indices. */
slideit.index = ++slideit.index % slideit.srcs.length;
/* Preload next image */
slideit.preloader.src = slideit.srcs[slideit.index];
}setTimeout("slideit()", slideit.delays[state])
}</script>
</head>
<body>
<center>
<img src="image01.gif" name="slide" xwidth="280" xheight="418" />
</center>
</body>
</HTML>
