asked on

Preload in the Head or the Body?

This is kind of a philosphical question, but what are the differences, when preloading graphics, between doing it in the head and doing it in the body?

I always used to do it in the head:

blah=new Image;
blah.src="whatever.gif";

and so on, but I've noticed that the Macromedia code (see my other question https://www.experts-exchange.com/jsp/qShow.jsp?ta=javascript&qid=10251786 ) has the loading happening in the body, from the onLoad handler:

onLoad=preloadingFunction(long list of images)

kind of thing.

Is there are reason why they're doing it this way which improves efficiency? Is it possibly inefficient, but suits their purposes in other ways? Which method will put the greatest performance hit on the page, if any?

Michel Plungjan

If you preload inline the head, the page content will be deferred until after preload.

so

<HTML>
<HEAD>
<SCRIPT>
if (document.images) {
a = new Image()
a.src = 'test.gif';
}
</script>
</head>

will in most cases have the page content wait for the image to load

whereas this

<HTML>
<HEAD>
<SCRIPT>
function preload() {
if (document.images) {
a = new Image()
a.src = 'test.gif';
}
}
</script>
</head>
<body onLoad="preload()">

will not start the preloading until after the page has rendered (postload ;-)

For buttonbars you can preload the OFF images and postload the ON images so the user waits a little and then sees the buttonbar immediately the page loads but does not have to wait for the mouseover buttons to preload to start looking at the page.

Michel

johnny99

ASKER

Are you saying that the mouseOver states should be preloaded or *post* loaded?

Are you saying that the JavaScript Onload only starts to happen when the whole of the HTML has downloaded and rendered, or just when it's downloaded to the browser?

Doesn't that mean that the page can have rendered, the buttons be visible, but the mouseOver states not be downloaded? Doesn't that mean that as soon as they put their mouse over the buttons, the browser will start grinding away and downloading a new image for the MouseOver state?

My main concern is that nothing slow the rendering of the page. Which one will do that?

Michel Plungjan

I am not saying you MUST do any of the above.

1. onLoad is triggered when the page has completely downloaded (in principle anyway, IE may think otherwise and sometime NS3 in frames)
If the page is being rendered with javascript, then I would think, downloaded, but onLoad should trigger in most cases when the page has rendered.

2. If you preload OFF and postload ON, then the user may be so fast at moving the mouse that the over button has not been loaded
That is up to you and your design and will to speed things up.

Preload all images in the head and the user will have to wait for all images.

Preload some images in the head and other onLoad and the user waits a little less.

load images in the previous page onLoad to possible get the images preloaded from cache

Don't use images and the user does not have to wait at all ;-)

It is a balance act...

johnny99

ASKER

Don't use images and the user does not have to wait at all ;-)

eh bien, ca vaut mieux mais c'est pas possible.

Preload all images in the head and the user will have to wait for all images.

j'aime pas

Preload some images in the head and other onLoad and the user waits a little less.

j'aime pas

load images in the previous page onLoad to possible get the images preloaded from cache

pas possible

Ce que je voudriais bien, c'est que la page se construit, [render?] et *au meme temps* les images sont en train de se telecharger... ca, c'est le resultat le plus attirant, ne'est-ce pas?

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

Oops forgot a closing curly:

onMouseOver="if (document.images) {
saveImg.src = document.images['i1'].src;
document.images['i1'].src=document.images['p1'].src"

should be

onMouseOver="if (document.images) {
saveImg.src = document.images['i1'].src;
document.images['i1'].src=document.images['p1'].src; }"

Michel Plungjan

Hmm too early in the morning! Forgot the mouseOut and the normal2

<BODY>
<script>
if (document.images) saveImg = new Image();
</script>

<IMG NAME="p1" SRC="over1.gif" WIDTH="1" HEIGHT="1"><A HREF="...."
onMouseOver="if (document.images) {
saveImg.src = document.images['i1'].src;
document.images['i1'].src=document.images['p1'].src; }"
onMouseOut="if (document.images) document.images['i1'].src=saveImage.src"><IMG NAME="i1"
SRC="normal1.gif" WIDTH="32" HEIGHT="32" BORDER="0"></A>
<IMG NAME="p2" SRC="over2.gif" WIDTH="1" HEIGHT="1"><A HREF="...."
onMouseOver="if (document.images) {
saveImg.src = document.images['i2'].src;
document.images['i2'].src=document.images['p2'].src; }"
onMouseOut="if (document.images) document.images['i2'].src=saveImage.src"><IMG NAME="i2"
SRC="normal2.gif" WIDTH="32" HEIGHT="32" BORDER="0"></A>