• 0

Image Loading Priority


Question

I'm working on a site, and the last image that it loads is the header. I want to have the header load first and then all the backgrounds and content images. What can i do to make that happen?

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

You could try pre-loading the image in an invisible div that is placed directly below the <body> tag. Just create a div right below <body> with the image inside and then set the CSS for that div to display:none;. This way that image will start to download to the browser before anything else. Then when it is finally called in its correct spot, it will be ready (or almost ready) to show.

This only speeds up the process, it does not necessarily make it the first image to show. What actually shows first depends on the order in which the images appear in your html and the sizes of those images.

Link to comment
Share on other sites

  • 0

You could use javascript instead to preload the images; then set them to hidden (Same concept as the Div display:none) then turn them on 1 by one, header first

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.