Lazy load images for Nivo Slider
Posted by Lee Powers
I've created and released a fork of Nivo Slider that enabled lazy loading of images via the data-src HTML data attribute. Ideal for large image slideshow - either the number of images or the file size of the images.
View live demo • Download from GitHub
jQuery slideshow plugins are a dime a dozen. But one of the best is Nivo Slider - it's simple, elegant, easy-to-use and has some really awesome transition effects.
One problem I've ran into with slideshows is the amount and quality of the images. Especially for user-generated images at a high resolution. These files tends to be on the heavy side and the bytes stack up if more than 2-3 are embedded in a document at a time. 150k to 250k at a time and very soon you have a document with several megs of high-quality images.
The solution is to enable lazy loading of images - loading images when they are about to come into view, instead of all at once. The fork I've created is an implementation of lazy loading for the Nivo Slider. Check it out! View the live demo or download the source from the Github project page.