I think this is a very simple question, so forgive me if it’s been answered elsewhere. I looked but wasn’t able to find what I was looking for. I have very little experience with JavaScript.
I have a many simple JavaScript slideshows contained on a single page that advance via a mouse click. See below for the code I’m using, which I’ve lifted from one of the introductory JS sites. This preloads each image from each slideshow when a user visits the page. I would like the script to NOT preload each image, and instead load the next image only when the user clicks to advance the slideshow. This is to reduce load time, since most users will not encounter most images. Is there an easy way to convert this into something that doesn’t preload each image?
<SCRIPT LANGUAGE="JavaScript">
var i=0
var imgs=["/a.jpeg","/b.jpeg","/c.jpeg","/d.jpeg","/e.jpeg"]
function slide(){ {i=i+1} {if (i==5) {i=0}} {document.img.src=imgs[i]} }
</SCRIPT>
And the code for when the slideshow is called:
<A HREF="JavaScript:slide()"><IMG SRC="/a.jpeg" NAME="img"></a>
Thanks!
– Patrick
Images start to load once they have a
srcattribute set, unless (unofficially) the element’s cssdisplayproperty is set tonone.So, as long as you don’t set the source of the
imgelement or JSImageobject, as appears to be the case in the code you posted, the image will not start loading.