PDA

Click to See Complete Forum and Search --> : Javascript Image Loading

Thanatos
06-07-2003, 11:38 AM
Hello everyone.

I have created this slideshow for a website using javascript only. I implemented it by changing the "src" of a particular image every 5 seconds. However, I have a little issue. The slideshow doesn't work too well with slow (say 56k) internet connections. It simply takes too long for the next image to load.

I did the slideshow as a java applet previously and I didn't have that issue because the applet would store all the images in internal structures during initialization. Therefore, initialization would take a while but the slideshow would run without hiccoughs after that. I reimplemented it in javascript becuase too many browsers didn't support java or had applets turned off.

Anyway, my question is this. Can I force a one time initialization of all the images while the page loads? I want a situation where the page takes a while to load (on slow connections) but the slideshow runs smoothly once it begins.

Thanks for your help.
Charles
06-07-2003, 11:46 AM
Originally posted by Thanatos
I reimplemented it in javascript becuase too many browsers didn't support java or had applets turned off. Actually, the number of users not using Java (http://www.thecounter.com/stats/2003/May/java.php) is roughly the same as the number not using JavaScript (http://www.thecounter.com/stats/2003/May/javas.php): 13 or 14%. Simply priovide a script-free slideshow alternative, one where each image is in its own HTML page along with "next" and "previous" links.
Charles
06-07-2003, 12:18 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Slide Show Example</title>
<script type="text/javascript">
<!--
var child = window.open('', 'child', 'height=400,width=400');
child.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">');
child.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">');
child.document.write('<title>Loading</title>');
child.document.write('<h1>Loading</h1><p>Please wait.</p>');
child.document.close();

var urls = ['http://www.bettiepage.com/images/photos/whip/whip1.jpg', 'http://www.bettiepage.com/images/photos/whip/whip2.jpg', 'http://www.bettiepage.com/images/photos/whip/whip4.jpg',
'http://www.bettiepage.com/images/photos/whip/whip5.jpg'];

var flags = 0;
var slideNumber = 0

var buffer = new Array();
for (j=0; j<urls.length; j++) {
buffer[j] = new Image();
buffer[j].onload = function () {if (++flags == urls.length) window.int = setInterval('slide(slideNumber++)', 500)};
buffer[j].src = urls[j];
}

function slide(n) {
window.open(urls[n],'child', 'height=400,width=400');
if (slideNumber >= urls.length) clearInterval(int);
};
// -->
</script>
<noscript><img src="http://www.bettiepage.com/images/photos/whip/whip1.jpg" alt="[The first image in the slide show]">
<p><a href="slide2.html">Next</a></p></noscript>
Thanatos
06-07-2003, 12:29 PM
Thanks Charles...that's exactly what I was looking for, some type of image object to cache the data.

About java versus javascript. In my case, I know that most of the audience has disabled java but not javascript.