1

I have a website with a home page that consists of a large image slider (FlexSlider) at the top of the page, and two rows of four images below it, with each of these images having a caption that overlays it.

Currently, when the page loads for the first time, all of the high-res images for the image slider will be loaded before any of the 8 smaller images below it. The result of this is that while all of the slider images load, there are a bunch of ugly captions all stacking ontop of each other and then when all the slider images have loaded, the subsequent images finally load and the page looks normal.

Is there any way to make the slider images load last?

Jordan
  • 908
  • 4
  • 17
  • 36
  • optimize the images for Web – kennypu Dec 22 '12 at 03:17
  • 1
    You could put the 8 smaller images at the top of the page with `display: none;` so that they load first. Or you could leave the `src` attribute of the slider images blank and insert them later with javascript ([example](http://stackoverflow.com/questions/4211519/controlling-image-load-order-in-html)). – grc Dec 22 '12 at 03:20

1 Answers1

1

I don't know any way CSS alone can solve this problem. If you have access to Javascript, it becomes a lot easier to solve.

  1. Use a lightweight default banner image: Something that loads very quickly and acts as a placeholder for slider images while they load.

  2. Javascript onload: Use Javascript to begin substituting the images after the page is fully rendered. You have a placeholder making sure the layout still looks good (no font mashing or broken layout for lack of a loaded image) which gets neatly substituted when the image is ready.

No render blocking, no messed up layout. Additional overhead of some Javascript (minor) and a generic banner image (should be minor if highly optimized).

akamaozu
  • 695
  • 1
  • 7
  • 15