How to create a lazy load carousel with Twitter Bootstrap

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.


=>> DOWNLOAD <<=

Post a Comment