deadlock Message Board
[ October Full List | Reply ]

Re: please somebody with some knowledge save me!
From Craig Boas at French Accents Antique Furniture on 6 Oct '00
replying to please somebody with some knowledge save me! posted by zammyh

>PRELOADING IMAGES> IS IT POSSIBLE?
>
>I've been searching high and low for a command for preloading images on my website - can this be done? - in advance of my index.html page opening ?
>
>- and can I preload images for the rest of the site upon a user getting into a sub-page of the site?
>
>please somebody with some knowledge save me!

In a word, yes. There is probably more than one way, but here's an easy one using javascript:

Hypothetically, if you wanted to preload the images "pic1.gif" and "pic2.jpg" (a pair of 100x100 pixel graphics) before your index page opens, include the following code snippet between your <head></head> tags:

<script language = "JavaScript">
<!--HIDE FROM NON-JAVA BROWSERS
if (document.images) {
var pic1 = new Image(100,100);
pic1.src = "pic1.gif";
var pic2 = new Image(100,100);
pic2.src = "pic2.jpg";
}
// END HIDING-->

</script>


If you've ever worked with javascript menus with mouseover effects (images that change when users pass their mouse pointer over them) you'll recognize this code. The difference here is that you only want to pre-load the graphics, so you don't need to define the mouseover events.

With respect to your second question, again the answer is yes. You could use the same code to do that, but if you are loading images in anticipation of the user visiting another page, it would make more sense if you were to structure it a bit differently. Again, between the <head></head> tags add the code:

<script language = "JavaScript">
<!--HIDE FROM NON-JAVA BROWSERS
function preloadImages() {
if (document.images) {
var pic1 = new Image(100,100);
pic1.src = "pic1.gif";
var pic2 = new Image(100,100);
pic2.src = "pic2.jpg";
}
}
// END HIDING-->

</script>

Next, your body tag should look like this:

<body onLoad="preloadImages()">

(Naturally, your body tag might contain other parameters such as background images, etc., but for now we're only interested in the "onLoad" segment.)

In the first example, the code is executed immediately, so the images should start loading before your page comes up. However, where you are pre-loading images for a subsequent page, it makes more sense to wait until the *current* page is fully displayed before you start loading the images for the next one. The second bit of code tells JavaScript not to start loading the images for the next page until this one is fully displayed.

I think this code will do what you want, after a little customization.

Hope this helps.

Craig




Reply to this message

Required Details
Your name:
Subject:

Optional Details
Home page title:
Home page URL:
Email:
(if you'd like to receive automatic replies by email)

Your Message