Forcing First Picture To Load First??

J

jim evans

I have a page that has a lot of individual pictures and takes longer
than is desirable to load, but it's not practical to change that. The
main problem is the first picture which appears on the initial screen
is not loaded first.

I've seen this behavior before, but I don't understand it. For some
reason both IE and Netscape load several later pictures before loading
the first one. This leaves a large blank on the opening screen for
10-15 seconds -- very undesirable, as the visitor thinks something's
wrong.

The subsequent pictures are in individual cells in a table.

Is there a way to force the first picture to load first?

jim
 
T

Thomas A. Rowe

No, the browser determine the order that elements are loaded, which is normally from the top left to
bottom right.

Make sure that all images are the same filesize and that you have specific the width and height of
each image, this should allow the browser to load the faster overall, since it will know how much
space to allow for each of the images, etc.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
J

jim evans

Make sure that all images are the same filesize and that you have specific the width and height of
each image, this should allow the browser to load the faster overall, since it will know how much
space to allow for each of the images, etc.
Click to expand...

I used FP to insert/place the images so I assume it provides the
needed information. Isn't that correct?

jim
 
J

jim evans

Do you know what happens when one picture is larger than others?

None of the image file sizes are the same, but in this case the first
image file is about twice as large as the rest. But, even though it's
only twice as large, about 4-6 of the other (roughly equal) smaller
images load before the first image loads. Do you know what explains
this?

jim
 
J

Jon Spivey

Hi Jim,

FP will add the size info for you. I don't think there's any reliable way to
control loading order - short of using some javascript. For an example see
this page
http://www.roksteady.net/scroll/examples/cars/index.html

Notice a placeholder image is displayed while the image loads. If you want
to go this route let us know or just view source on that page - the script
is nothing fancy.
 
T

Thomas A. Rowe

You would have to look at the actual image file sizes and view image properties to see if FP is
inserting the image dimensions.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
T

Thomas A. Rowe

The smaller the file size the faster it will download and be available to be displayed, thereby
smaller images will load before larger images.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
J

Jim Buyens

Normally, IE displays pictures in the order they become
available. By default, this is top to bottom, as the <img>
tags appear in the HTML, but a smaller picture near the
bottom may finish arriving before a larger one near the
top.

To make specific pictures available sooner, you can
*preload* them. This involves adding a script such as the
following to the <head> section of your Web page.

<script>
var pic1 = new Image(); pic1.src = "images/picture1.gif";
</script>

Of course, you should change the path and filename
images/picture1.gif to the path and file name of the
picture you want to appear faster.

If necessary, you can duplicate the statements on line two
to load additional pictures. Just be sure to change the
variable name pic1. Here's an example.

<script>
var pic1 = new Image(); pic1.src = "images/animal.gif";
var pic2 = new Image(); pic2.src = "images/veggie.gif";
var pic3 = new Image(); pic3.src = "images/gravel.gif";
</script>

Please note, however, that there are additional issues
involving tables. Specifically, Internet Explorer normally
sizes the entire table before displaying any part of it.
And sizing a table can take a long time, particularly with
liquid layouts that have a lot of line-wrapping to
optimize.

Jim Buyens
Microsoft FrontPage MVP
http://www.interlacken.com
Author of:
*----------------------------------------------------
|\---------------------------------------------------
|| Microsoft Office FrontPage 2003 Inside Out
||---------------------------------------------------
|| Web Database Development Step by Step .NET Edition
|| Microsoft FrontPage Version 2002 Inside Out
|| Faster Smarter Beginning Programming
|| (All from Microsoft Press)
|/---------------------------------------------------
*----------------------------------------------------
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Pictures with paragraph spacing offset at top of page 10
First css page - am I doing it right? 7
Custom Animation button no longer loads CA task pane... HELP! 2
Excel memory and speed when inserting pictures ??? 2
Linked forms positioning loading/unloading 0
Repost: Speed of inserting pictures and Excel memory 11
Tips for entering equations and sketches into OneNote 9
A little feedback 7

Top