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 
Awesome, precisely what I needed
Next time, feel free to put it on GitHub and link to it there instead of a zip!
Cheers.
Jonatan
Btw, seems this code has some serious problems with page switching… it just goes in a loop and doesn’t stop (all the pages are looped through after clicking once).
Hi Jonatan,
Thanks for your feedback, honestly I used it on a couple of projects and it doesn’t seem to have any problem. I’ll take a look, I could forget something. Do you see the problem in the package you downloaded or in your project?
Hi Jonatan, I’ve just uploaded a new version with few changes, let me know if you still have the problem. Thanks
This is absolutely wonderful! I am currently working on implementing this into my new portfolio site to drastically reduce the load time. I am having one problem with it; I have multiple carousels on a page hidden by collapsable panels and the first carousel works perfectly, but every carousel after that advances automatically. Any idea why this might be happening and how it could be fixed? Thank you!!
Hi maurizio.
Thank you for this great code. It is exactly what we needed!
Anyway i have one small question:
is it possible that, after all the first images tagged only with “img src” the other images (lazy-src) are loaded automatically, so that we can avoid that the user has to wait till the image is loaded.
So we could achieve that the images are always already loaded in the carousel and there are no problems and there is no need to wait for the loading of the next image in the carousel!
thanks again for your good job!
all the best
martin
Hi Martin, you are absolutely right. It would be a nice improvements. I’ll consider it in my next update, if you work on that please let me know.
This works perfectly, thank you.
Hope you enjoyed your time in my city as well.
Hi Rohit, I am glad it is useful!
Do you come from Jaipur?
Anyone getting issues with this for IE8? I’m getting a stack overflow error, when it trys to load the first lazy-src image.
Hi, Maurizio,
I’m using your script and it’s great, thanks.
Just a question, I’m trying to make it work for several images per item (cycling them with another script) and I’m kind of lost, I’d appreciate if you could show me how can I accomplish that.
Regards, Jesús
Thanks for you comment!
The changes I’ve made for this post are strictly related to the bootstrap carousel.
They can’t be used with another cycle plugin.
I am sorry I can’t help with that.
Implemented great for the bootstrap slider however on IE8 I get a “Stack overflow at line: 0″ error when it tries to “slide”.
Any ideas?