Way the images load in browsers

[smrnsmile]

Most of the time the sliced images while loading appear as patches or in parts which looks really bad wen a website or a mailer is loading, can we define which images to load 1st and then the rest through some code??

[djr33]

I don't know of a way to actually tell the browser which files to load first. There is no code that makes a list, or anything like that.

However, here are some options:

1. You can save your images as progressive (works with JPGs at least), so they all load very quickly for a first pass then will get detail as the downloads continue. That may help. You would do this in your image editor, just choosing "progressive" as you save the image. You can choose 3-pass, for example, and it will load three times: once very badly, once with a little more detail and once with final quality. And the good part of this is that it doesn't usually take more space to save an image like this-- sometimes even less than without.

2. You can DELAY some images by adding them to the page later by javascript. I don't really recommend that, nor can you force anything to go faster, but you can at least let the important images load and get out of the way before you let the rest of the page do so.

3. You can stack your html code so that the first image in the html is the first image you want to load, the second follows, then the third, etc. I'm not sure this is really going to force a browser into a certain order, but it seems like it might help. You would have to integrate this into your layout, however, so that is difficult, but you could use layered divs that position those first images beyond the rest, etc.

4. You can not use slices-- use layered divs, background images and other methods to avoid slices and that way you won't have to worry about this. It doesn't exactly fix your problem but it might help.

5. You can preload the entire page, using javascript, and though it might be hard to setup, that way the page would be revealed in a complete state, if it is that important.

6. Also, this should only be a problem one time for visitors. Once they have visited one page, the images should remain cached at least for a little while, so no more loading required. There may be a way to change the caching settings if you have that disabled now, or something, to help this work.


Be warned, though, that some of these ideas may generate awkward or nonstandard html, so you might be best just keeping it as is.

[jscheuer1]

Image Slices are a bit archaic and tend to produce a very constricted layout that doesn't easily adapt to various resolutions. With many modern browsers now equipped with a zoom utility (which resizes everything equally when it works), this is less critical now than it once was. However, a fluid layout using no tables and with content that can be as easily viewed in a text only browser is still to be preferred. One can express font sizes in percents and container element's dimensions in em's. That way the zoom will work (as it would with any layout if it is any good), but also older browsers and text only browsers will have no trouble with the page regardless of resolution.