CODEWITHSUNDEEP
htmlcssflexslider
Jordan
Jordan

Reputation: 938

Prevent image slider from loading all of its images first

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?

Upvotes: 1

Views: 1976

Answers (1)

akamaozu
akamaozu

Reputation: 705

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

Upvotes: 1

Related Questions