I have a page for a real estate website with a list of all of the companies properties. Within each listing, there is a slider with ~50 images of that property.
DEMO: http://lexis250.github.io/groupecopley/properties/
The site is built with Jekyll and Foundation.
The problem is that this page is extremely heavy to load. I would like to implement a lazy load so the images are only loaded when they are requested. What is the most efficient way to go about doing this?
Code base on github: https://github.com/lexis250/groupecopley
If I need to provide more information please let me know. I am a beginner.
You can implement this using a combination of pagination and lazy loading. You can place 5 or 10 sliders on a page. Then each slider can use lazy loading to load images. As suggested in the comments as well look into slick here: http://kenwheeler.github.io/slick/
Scroll down on the link you will see a feature for lazy loading along with code.
Edit: You can also look into image compression and optimizing websites by gzip compression. Gzip compression is explained here: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/