[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Preload in the Head or the Body?

Posted on 2000-02-08
7
Medium Priority
?
709 Views
Last Modified: 2008-02-01
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?

0
Comment
Question by:johnny99
  • 5
  • 2
7 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2503148
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
 
LVL 2

Author Comment

by:johnny99
ID: 2503393
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2503423
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 2

Author Comment

by:johnny99
ID: 2510769
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 400 total points
ID: 2510825
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2510829
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2510833
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

640 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question