PDA

View Full Version : preloading - both or just one?

Aboveaverage
10-29-2003, 08:33 AM
http://www.webdeveloper.com/javascript/javascript_preload_roll.html

The comments support something I've occasionally read elsewhere about rollover images & preload, namely that it is only necessary to preload the image the mouseover is changing TO, not both, since the 1st one will appear already as the page is loaded.

Usually though the suggested mouseover scripts I've seen are coded to preload both. I'd be interested in other's commnents on that? Does it matter?
jaeman
10-29-2003, 08:43 AM
I preffer to preload both or three for that matter:

over
out
hover

if it's preloaded it's there, i just make sure the out image loads first... jaeman;)
piglet
10-30-2003, 08:00 AM
Hi Aboveaverage,

Preloading is a pretty bad idea.

Let me explain.

Preloading images just slows down your page load. It forces your user to load all the possible images that your page might need, starting the load on their internet connection before the content of the page (this bit they actually need) has been loaded.

Preloading the image used on the page (you called it "1st") is totally unnecessary as the browser will make the request for this itsself in one of two places:

1. At the point of the <img> tag if you have no width or height coded
or
2. At the point the </html> of the page has been reached and the browser is ready to go back and start to load images

What is really worthwhile is Postloading, not preloading. Postloading is where you trigger the loading of alternate images you might need from the onload event of the page. At this time the user has the whole page available to them to look at and read, and their internet connection bandwidth usage is typically low. You can use that point of low usage to start to load images which might be needed as the user interacts with the page.
Aboveaverage
10-30-2003, 08:32 AM
Thank you, jaeman and piglet for your input.

I posted this question because of a thread in the HTML page layout forum on MouseOver/preloading.

Piglet, I appreciate your comments because I made a website for a friend who wanted a menu with image rollovers, and I preloaded the images as I'd read to do... but the page does take a bit to load, and I didn't really understand why since what I'd read said pre-load helped.

I'm just beginning to learn javascript, and mouseover effects are among the first lessons... what is the event (I hope I'm using the right term?) to use to get images to postloadafter the page has finished loading?
piglet
10-30-2003, 09:03 AM
Hi,

Here's a little demo - just use the onload event - either in script or put an onload= into the body tag.

I have a much more sohpisticated loader I wrote ages ago on this link (http://home.btconnect.com/piglet/stephen/ImageLoader.html) - it's more than you'd normally need, but where you need to kick off events as images load or have a %age loaded image bar it's great and works cross browser....

Anyway...back to the little demo:

<head>
<title> New Document </title>
<script type="text/javascript">
//<![cdata[
onload=postload;

function postload(){
alert("the page is finished loading - time to load images I might need!");
var i = new Image();
i.onload=foo;
i.src="http://home.btconnect.com/piglet/images/piglet7.gif"
}

function foo(){
alert("I loaded and am about to use: " + this.src);
document.getElementById("blah").src=this.src;
}

//]]>
</script>

</head>
<body>
Blah Blah image:
<img src="http://home.btconnect.com/piglet/images/piglet8.gif" width="50px" height="50px" alt=""/>
<br />
This is a placeholder representing an image I might need later:
<img id="blah" src="" width="50px" height="50px" alt=""/>
</body>
</html>
Aboveaverage
10-30-2003, 07:50 PM
Wow, thanks! I'll try it. Appreciate the help.
MrPerlishells
11-06-2003, 07:04 PM
Doesn't this have to be inside the body tag?
onload=postload;

Like this:
<body onLoad="postload()">
Willy Duitt
11-06-2003, 09:30 PM
Originally posted by MrPerlishells
Doesn't this have to be inside the body tag?
onload=postload;

Like this:
<body onLoad="postload()">

No because it was already called on window.load in the script.

<head>
<title> New Document </title>
<script type="text/javascript">
//<![cdata[
onload=postload;


....Willy

function postload(){