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 only 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 v3.0.3 (in the patch there is also the code to use it with twitter bootstrap v2.3.1). I am going to update periodically the code. Subscribe to the mailing list in order to be notified when a new version will be available.
I promise that I won’t sell your email or send you spam 😉
Download the full code example from github or using the button below.
The same code above can be used also to create a “standard” (not lazy) twitter bootstrap carousel, you need only 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 😉