Saturday 20th December 2014,
Maurizio Conventi

How to create a lazy load carousel with Twitter Bootstrap

Maurizio June 12, 2012 Code Snippets 54 Comments

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 ;)

Like this Article? Share it!

54 Comments

  1. Jonatan Littke June 23, 2012 at 22:01

    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

  2. Jonatan Littke June 23, 2012 at 22:18

    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).

    • Maurizio June 24, 2012 at 06:03

      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?

      • Maurizio December 10, 2012 at 09:54

        Hi Jonatan, I’ve just uploaded a new version with few changes, let me know if you still have the problem. Thanks

  3. Andrew July 29, 2012 at 03:22

    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!!

  4. martin October 10, 2012 at 00:25

    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

    • Maurizio December 10, 2012 at 09:53

      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.

  5. Rohit December 15, 2012 at 08:45

    This works perfectly, thank you. :-) Hope you enjoyed your time in my city as well.

    • Maurizio December 15, 2012 at 09:52

      Hi Rohit, I am glad it is useful!
      Do you come from Jaipur?

  6. Scott January 11, 2013 at 22:53

    Anyone getting issues with this for IE8? I’m getting a stack overflow error, when it trys to load the first lazy-src image.

  7. Jesus March 13, 2013 at 14:10

    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

    • Maurizio March 13, 2013 at 17:56

      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.

  8. da March 25, 2013 at 06:49

    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?

  9. Deniz June 24, 2013 at 23:04

    Hi, this looks grate! But do you think something like this is possible for the bootstrap accordion? And if so, is there a example i could look at?

    Many thanks!

    • Maurizio July 2, 2013 at 14:17

      Hi Deniz,
      I guess it is absolutely possible.

      Sorry at the moment I don’t have links for that but if you find something please let me know!

      Thanks,
      Maurizio

  10. chip wagner July 1, 2013 at 02:41

    Mario, this is really great. I do have a feature request, or at least looking for insight how to accomplish this. I am using bootstrap 2.3.2, and this works like a charm. However the “indicators” that change, when you load new pictures never change. If you click on the indicators, the obviously load the picture appropriately. However the “indicators” themselves will not work. Thoughts? Suggestions?
    Thanks

    • Maurizio July 2, 2013 at 14:19

      Actually I was working on the new version for bootstrap 2.3.1 but it is not fully tested.

      If you want I could send it to you in preview ;)

      Maurizio

      • chip wagner July 3, 2013 at 21:42

        Maurizo, that would be great. It would save me from jumping off a bridge this holiday weekend… Kudos on the work, it is really great. Do you have my email base off the posting?
        Thanks Much

        • Maurizio July 4, 2013 at 12:34

          Sure, I’ve just sent you an email with the last package using bootstrap v2.3.1

          Please let me know how it works so that I can leave it available for all :)

          Thanks!
          Maurizio

  11. Jackie July 26, 2013 at 08:08

    Is there a way to update the code to allow for lazy loading of multiple images per slide.

    I currently have a slider that allows 6 images per slide.

    • Maurizio July 26, 2013 at 09:42

      Hi Jackie,

      At the moment the first idea I have is to give multiple links at the lazy src and manage them.

      Let me know if you manage that, thanks!

  12. chip wagner July 31, 2013 at 00:33

    Hey just want to give a shout out. The updated code that Maurizio provided for the newer version of Bootstrap is awesome.. Great job man.

    • Maurizio July 31, 2013 at 17:25

      Thanks for testing the code, I updated the post. Actually I’ll update the package again for Twitter Bootstrap 3 ;)

  13. Stephen October 7, 2013 at 17:46

    I’m getting stack overflow in ie8 specifically.

    if i switch back to using normal 2.3.2 bootstarp carousel and scr not lazy-src all is fine.. so it looks to be coming from this lazy loader. i have disabled any other Jquery scripts etc on my page.

    I see Scott mentioned it

  14. liso November 5, 2013 at 18:34

    Great, but i have issues in IE. :(

    Until it loads all images, its sliding both directions (randomly i guess) and too fast. :(

    Any idea or patch? Thanks.

  15. Mauro March 3, 2014 at 09:54

    Hi, Maurizio. Good code. However, when I put also a carousel control and I click over it, firebug return an error and the cycle stops. Any idea to resolve it? Thank you

  16. Mauro March 3, 2014 at 12:31

    Ok, I solved it by changing the line 248 with:
    $target.data(‘carousel’).to(slideIndex).

    The function cycle() returned me an error.

    PS. Ottimo plug in, grazie! :)

  17. Maurizio March 3, 2014 at 19:39

    Mauro are you using bootstrap 3? Probably that is why you have the errors, I need to upgrade my code. Feel free to subscribe to the mailing list in order to get updates ;)

    Grazie,
    Maurizio

    • Mauro March 4, 2014 at 12:39

      Thanks for replay, Maurizio. No, unfortunately I have to support ie7 visualization and I still use bootstrap 2. :’(

      That problem occures with bootstrap 2.3.2 when I add the carousel control and I click on an image not loaded yet.

  18. ffdf March 26, 2014 at 06:01

    cxcxc

  19. Anamaria April 2, 2014 at 16:51

    Hi, Maurizio. Good code. However, when I put also a carousel control and I click over it, firebug return an error “e.data(…) is undefined”. Any idea to resolve it? I use bootstrap 3. Thank you very much.

    • Maurizio April 3, 2014 at 11:04

      Hi Anamaria, unfortunately the code is for boostrap 1.2 … please register to the mailing list if you want to be notified when the lazy carousel will be updated to angular 1.3.

      Thanks!

  20. Martin April 14, 2014 at 15:53

    Hello

    How will I need to change it to lazy load multiple elements in carousel, example im showing 3 images per slider. Currently yours only retrieves the next element.

  21. Gretchen June 6, 2014 at 17:54

    Hi Maurizio, thanks for this bit of code, the ajax icon doesnt seem to pop up for me when the images are loading, instead if the slideshow is being advance it will go back to the previous slide then forward once the image has loaded. Any tips I’m sure is a simple thing I’m overlooking.

  22. Stuart Hallows July 3, 2014 at 05:04

    Owl Carousel is nice looking and supports lazy loading without the jiggery pokery.
    http://www.owlcarousel.owlgraphic.com/

  23. sirlate August 20, 2014 at 12:23

    wow! works perfect. Thank you very much.

Leave A Response