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 http://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?

LVL 2
johnny99Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
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


0
johnny99Author Commented:
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?






0
Michel PlungjanIT ExpertCommented:
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...
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

johnny99Author Commented:
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?









0
Michel PlungjanIT ExpertCommented:
If you wish... I am not sure the browsers will react in the same way, but try this then:

<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"
onMouseOver="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"
onMouseOver="if (document.images) document.images['i2'].src=saveImage.src"><IMG NAME="i2" SRC="normal1.gif" WIDTH="32" HEIGHT="32" BORDER="0"></A>

Michel
PS: Je ne sont pas Français mais Danois ;-)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertCommented:
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; }"
0
Michel PlungjanIT ExpertCommented:
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>
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.