[thelist] quicker page loads.

Tue Jun 15 18:55:13 CDT 2004

----------------------------
better techniques for faster loading of pages with much image content.
I am building a gallery for a photographer and I am using layers and 
onMouseOver show layers to present the images.
Obviously in order to present the content well all images need to load

"onLoad". This can severely slow the page loading
with many images loading at the same time.
----------------------------

If you are adding images to the page in hidden layers (divs) then there
is surely no need to preload the images using <body onLoad>. The images
will be loaded when the browser "gets to" the div code - no need to
preload them first. 

The only reason to preload images using <body onLoad> is if you have
rollover images - here the image that appears on mouseover is not part
of the page so otherwise would not be loaded until the user mouse
overs.

If these are absolutely positioned layers (divs) then you can place the
div code wherever you want in the source code (and they will still
appear in the same place that you want on the actual webpage that the
user sees). The browser will load the page from top to bottom - the
nearer to the top of the code the divs are placed then their loading
will be proritised. 

So, you could have the code for the layout, the text of the page and
the background of the page come first, and then the code for the hidden
layers - so the page would appear to load quickly, and then the extras
will start to load. If there is one hidden layer that users are more
likely to want to mouseover straight away then you could prioritise the
loading of that one by placing the code for that one near the top. If
there are hidden layers that the user is not likely to mouseover then
these can be placed at the bottom. 

It would be a good idea to run the page through a tool that shows how
the browser is loading each of the page elements in turn, such as:
http://www.webperf.org/breakdown.html
move the div code around a bit and see what the effect of the change is
on that tool.

I presume from the fact you call them "layers" that you are using
Dreamweaver - if you don't want to go into code view you can still move
the div code around the page in design view by moving the little layer
icons (yellow with a C on them)  around the page - the actual layer will
still be in the same place.

cheers

Dr Stuart Young,       +64 (0)9-815 4321 Ex 8656
<syoung at unitec.ac.nz>     
Lecturer, School of Computing and Information Technology,
Unitec New Zealand, Auckland, New Zealand
http://hyperdisc.unitec.ac.nz/staff/syoung.htm
I would provide a URL for my official staffpage, but its too long and
complex