Entry
I have a page with thumbnail images which each link to a large jpg. How can I preload all the large jpg images so they'll appear right away?
Sep 26th, 2000 21:40
Mike Hall, Bart Hoeksel,
You can preload an image in JavaScript by creating a new Image object
and setting the .src property:
var img1 = new Image();
img1.src = "/graphics/pic1.jpg";
var img1 = new Image();
img2.src = "/graphics/pic21.jpg";
...
** However ** The whole point of using thumbnail graphics is to avoid
downloading the full sized image, so I'm not sure what your point is
here. Preloading all the full images will take just as long as if you
included them directly on the page. Plus you'd be downloading all the
thumbnails as well.
If you still want to preload them, put the above code inside a function
and call it using the body onload event:
<html>
<head>
<title></title>
<script>
function loadThemAll() {
// Preload images...
}
</script>
<body onload="loadThemAll()">
...
</body>
</html>
At least the user will be able to view the thumbnails as the full size
images load.
