CSS for loading instances of images

[mattbing]

If you have a page that uses the same image for decoration (shadow line, icon etc) repeatedly say 100 instances for this example, loading it through a global css, would this have a significant impact on load times of the page? Is there away to load from top down, so page is loading from start but items at bottom of page load later etc.

Is there a way to calculate load times before actually building the page?

Any help greatly appreciated , and hello!

[Xeel]

The page load speed depends on the connection speed so until you have your page saved as one big file you can't calculate the whole process. A good example of a calculated loading time would be flash web site, but these are exactly "one big file".

The impact of loading image instances is insignificant comparing to the loading time of the original, so no, there will be no impact, it is a correct way to do it. It's much worse when people put huge background images on their pages practically killing their page popularity for visitors with slow connection. What actually happens is: the browser downloads the original "tile" image to client's PC and then browser renders the image according to the rules, taken by default or defined by an adjacent CSS. So as you understand to fill some space with an image from the local hard drive takes client's CPU milliseconds and the process does not depend on connection at all any more.

Normally page loads from top to the bottom, but then, especially for small images some packets can get lost and "later" images could load faster. Anyways web browsing it's a simple file downloading in the end, so as you download html from the top to the bottom the browser begins to render the page. It's not like some kind of p2p when you get your file by pieces in random order.

[mattbing]

Thanks very much for the excellent explanation.