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.
NOTE: The example uses twitter bootstrap v2.3.1. I am going to update the code to Twitter Bootstrap 3. Subscribe to the mailing list in order to be notified when the new version will be available.
I promise that I won’t sell your email or send you spam
Download the complete code example using the button below.
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.
I hope that the lazy plugin is useful also for you, let me know