What Determines the Order Web Images Appear 4

[SpeedMule]

I have several images on my splash page which has been derived from a sliced Photoshop page.

When this page is generated on the Web I noticed the images do not appear in the order in which they were sliced.

Should they regen. in "slice number" order or will the image last to be produced or modified in the Photoshop file be the final one to appear?

Best Regards

SM7

 

[MichiganRon]

[red]SpeedMule[/red],

There's no easy way to control the order in which images load on a page. However, check out this page for a quick and dirty tutorial on how to use javascript to control it.

Hope this helps,
Ron

“If you are irritated by every rub, how will you be polished?”
~ Mevlana Rumi


murof siht edisni kcuts m'I - PLEH

 

[SpeedMule]

Thanks for your 'js' link, Darkshadeau.

I followed how the script controlled the opening of the 4 .gifs and now I'm
wondering if/how javascript works with the <td> table cell element.

My image slices essentially comprise the page graphic and I'm hoping js can
manipulate each <td> .jpg image. Any help on how to implement the js code
into the following example sequence would be much appreciated.

<TR>
<TD background="images/12.jpg" WIDTH=185 HEIGHT=217 ALT=""> <div id="maintext">
The recommendations are listed in vol. IX
</div>
</TD>
<TD COLSPAN=9 ROWSPAN=7>
<IMG SRC="images/13.jpg" WIDTH=615 HEIGHT=751 ALT="">
</TD>
</TR>

<TR>
<TD>
<IMG SRC="images/14.jpg" WIDTH=185 HEIGHT=29 ALT="">
</TD>
</TR>

All the best

SM7

 

[MichiganRon]

Hmmm. Maybe someone else has a suggestion?

PING

“If you are irritated by every rub, how will you be polished?”
~ Mevlana Rumi

 

[BabyJeffy]

The problem with a JS solution, is that non-JS users will see none of the images at all (using the link darkshadeau posted earlier on)... this is beacuse the image is initially blank (and loaded programatically using Javascript).

You could look at listing the images you are using on the page in such a way as the images are listed in the order you want them to display. This will no doubt require you to change the layout of your page somewhat (move to using DIVs and positional CSS maybe).

Another trick may be to pre-cache these images in a previous page... since as long as the images are in the browser cache, they will display right away (rather than waiting to download first). One (old - non javascript) way to precache images is to load them as 1x1 images (on the previous page).

I don't have any other hidden tricks to help you I'm sorry... I suggest you try and redesign the page structure so that the images appear in the source code in the order you want to load them.

Hope at least some of this makes sense,
Jeff

 

[SpeedMule]

Thanks Jeff

I'll look into it. When I produced my Splash Page Graphic in Photoshop I sliced the image links and logo header logically so as to generate "easy-on-the-eye, sequential page generation" (whatever that means!).

I've noticed on different occasions that the page slices do not necessarily load in the same order. The source code suggests numeric order yet the actual loading order doesn't follow.

It's no huge deal, I guess, but I like to get things as spot-on as possible without having to compromise.

Thanks again and all the best

SM7

Stand back, folks, I'm about to design

 

[RISTMO]

Use CSS's z-index.

<img style="z-index:1;">
<img style="z-index:2;">
<img style="z-index:3;">
<img style="z-index:4;">
<img style="z-index:5;">
<img style="z-index:6;">

I don't remember if the higher number displays first or last, but you should be able to find out with a little experimenting. Z-Index is actually meant to determine the order layers appear in if they overlap, but it also affects the loading order, and since they aren't overlapping, there won't be any problem using it.

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/

 

[BillyRayPreachersSon]

As far as I know, images always start loading in source order. Whether they finish loading in that order or not is another matter altogether, and will depend on things like file size, bandwidth, whether the user has increased their max connections from 2, if they're using HTTP1 ot HTTP1.1 (these have different connection "maximums"), etc.

Hope this helps,
Dan

 

[BabyJeffy]

One more thing to note... images that are defined in CSS (background images) will load (as opposed to display) *last* of all. You can always get around that (of course) by preloading the image using JS - since as if it is cache it will display immediately regardless of it's use.

It wouldn't surprise me if this was a non-standard IE thing... but there you have it. Does anyone know if maybe this observation is more along the lines of "the CSS is parsed last" instead of "images defined in CSS load last"?

Jeff

 

[tviman]

Dan has the right answer... assuming that the images have not been previously loaded/cached, the order that images are "attempted to be loaded" are the way they appear in the source code. BUT... how they are actually loaded will depend entirely on the users bandwidth and number of connections - and the response of the server.

There's always a better way. The fun is trying to find it!