Recently I needed to create a lazy load carousel for a personal project. I was working with Twitter Bootstrap so I decided to make few changes to the default bootstrap carousel.
A lazy load carousel delays loading of images in order to make the page load faster. It loads the images only if needed. It is useful for all web pages but mainly for web pages containing many large images. Its behaviour is opposite of image preloading.
I decided to release what I’ve made because it could be useful to others.
To use it you need just to define the
lazy-src="define your image path here" attribute for the images that must be loaded on demand (I suggest from the second image). Create the carousel with
$('.carousel').carousel() just as for the default carousel.
I created a simple example about how to create your lazy carousel.
The same code above can be used also to create a “standard” (not lazy) twitter bootstrap carousel, you just need to call the original carousel js file and set the src attribute to all images.
UPDATE: The example now uses twitter bootstrap v2.2.2
I hope that the lazy plugin is useful also for you, let me know