How can I control how Nivoslider preloads images?

Question

I'm using the excellent Nivoslider plugin to showcase a set of photos on my homepage, currently 5. All is working fine, but each photo adds about 150K to the page weight. I would actually want to showcase about 10 "slides", but since all these images are preloaded at the opening of the page, the page weight will soon become (too) large, especially since many users will likely not wait for the "show" to finish.

I was wondering if it is possible to not preload images, or beter, only x images ahead. I can't find anything about it in the documentation, so I presume it is not natively supported. Any ideas?

Answer 1

I've been looking for a similar solution. I have an image gallery on a web site that loads a dozen high-quality images on the home page using a slideshow plugin. And all these images are being loaded at once adding 2-3 megs to the page weight. No dice.

Nivo leaves image handling up to the browser. It reads the <img src="..."> tag and then gussies up the images into a slideshow with slick transition effects. There's nothing in code to control the loading or preloading of images.

Fortunately Nivo is on Github. So I forked it to support lazy loading of images:

https://github.com/leepowers/Nivo-Slider

The usage is the same. With one small change to the HTML

<div id="slider">
 <img src="my-large-image.jpg" alt="">
 <img src="my-large-image2.jpg" alt="">
 <img src="another-biggun.jpg" alt="">
</div>

Change the image src attributes to data-src attributes:

<div id="slider">
 <img data-src="my-large-image.jpg" alt="">
 <img data-src="my-large-image2.jpg" alt="">
 <img data-src="another-biggun.jpg" alt="">
</div>

Since data-src is not parsed the images aren't loaded until Nivo is ready to use them. data-src has precedence over src which means you can specify low-res versions in src for non-javascript users, or populate src with a spacer image so the HTML will pass a validator.

Check it out! I'm implementing it on several projects. A demo is available here: http://powers1.net/files/nivo/demo/demo-lazy.html