7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

How to set order of image loading?

by DavidO
5 replies
  • WEB DESIGN
    • |
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?
#image #loading #order #set
  • Profile picture of the author webdesignpa
    Rename your header image alphabetically, then set image in div one down.
    {{ DiscussionBoard.errors[3339123].message }}
    • Profile picture of the author SteveJohnson
      Originally Posted by webdesignpa View Post

      Rename your header image alphabetically, then set image in div one down.
      Total garbage.

      Originally Posted by DavidO View Post

      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.
      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.
      Signature

      The 2nd Amendment, 1789 - The Original Homeland Security.

      Gun control means never having to say, "I missed you."

      {{ DiscussionBoard.errors[3341599].message }}
  • Profile picture of the author Peter01
    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.
    Signature
    {{ DiscussionBoard.errors[3342114].message }}
  • Profile picture of the author Steve Wells
    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.....
    Signature
    Need Custom Graphics Work? - Message Me For A Design Quote!
    {{ DiscussionBoard.errors[3342388].message }}
  • Profile picture of the author WillR
    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.
    Signature

    .


    .

    {{ DiscussionBoard.errors[3346305].message }}

Trending Topics