How to set order of image loading?

by 5 replies
7
I've got a header background image and another background image for the header container. They come right after each other in the style sheet.

But browsers render the first image immediately and then wait until all other content is loaded before loading the second image.

So a visitor with a slow connection ends up looking at an incomplete header until the whole page finishes. This is ridiculous and there seems to be no logic to it.

I've heard of preloading images but nothing I've googled has worked.

Can this annoyance be improved?
#website design #image #loading #order #set
  • Rename your header image alphabetically, then set image in div one down.
    • [1] reply
    • Total garbage.

      Browsers use multiple connections to get what they're supposed to get to display a page, and AFAIK there's no foolproof way to influence the load sequence.

      You CAN use javascript to blank the whole screen until the page is drawn, but then your visitor sees a blank screen. Not good.

      The only way I know of to guide the drawing of a page is to experiment with positioning and z-indexes to try and control which layers of the page are 'painted' first by the browser.

      Brutally optimizing your images might also help a lot.
  • Remember to set manual width and height parameters in the image dimensions, so that as the image loads it does not move the layout around.
  • Steve Johnson is correct, and I have discussed this with several other designers who are disgusted with this type of thing.

    As a designer we just want the design things to look nice, but with the way pages load, people always say you have to optimize the image, and what happens is that you have to brutally optimize it to get it to load fast, which destroys the look in the first place. Thats where the disgust comes in...

    I did look into something called "gzip" and I am not real familiar with how it works or if it would help, but in theory it seems to be something that may help faster load times.

    Also, sprites are good, but they are usually I believe for smaller images, not images as large as a header, but it may work with something that large, I have not tried to do that, maybe someone else has that will read this and can give some imput on to if you can actually use sprites using the header image?

    I seemed to remember somewhere that someone had a post of how the order of things are rendered and how to manipulate it, but I do not know where it is, it was on this forum somewhere, just do not remember where.....
  • You need to find a good compromise between image quality and image size. Great looking images are nice but if your website takes forever to load, there is no point having them. People tend to forget there is still a large number of people out their on slow dial-up connections.

    If you have some images and you want to speed up your page then try using a free service like GifBot to find the best size/quality ratio for your image. Very easily done.
Join the discussion

Next Topics on Trending Feed

  • 7

    How to set order of image loading?

    I've got a header background image and another background image for the header container. They come right after each other in the style sheet. But browsers render the first image immediately and then wait until all other content is loaded before loading the second image.