Lazy Nivo Slider - lazy loading of images for "The Most Awesome jQuery Image Slider"
Pull request Compare This branch is even with leepowers:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Lazy Loading Nivo Slider

A fork of Nivo Slider enabling lazy loading of images.

Use cases:

  • Dozens of images in the slideshow
  • Very large images
  • Mobile environments


Works exactly like the existing Nivo Slider with one little change. Add a data-src attribute to your images:


<img src="my-image.jpg" alt="" title="Caption for my image.">


<img data-src="my-image.jpg" alt="" title="Caption for my image.">

And that's it!

Though it's highly recommended to include a src to small placeholder image for valid HTML markup. (And for non-javascript users). Note that data-src has precedence over src

View the live example:

See demo/demo-lazy.html in the repository for example code. (Or view source on the demo)


The custom onImageLoad event is exposed and triggered whenever an image starts loading. May be called multiple times per image.

About the author

Forked by Lee Powers:

I've needed this for a while for slideshows with large images or a large number of images. Tried dabbling in creating my own jQuery slideshow plugin, but Nivo already has 99% of what I'm looking for. Reading this Stack Overflow question provided any additional push needed to get this working!

About Nivo Slider

To find out more about Nivo Slider visit the home page at

Nivo Slider GitHub Project Page: