Last Updated: October 04, 2020
·
34.28K
· rewritten2

Lazy carousel in bootstrap

Easy-peasy way to lazy load images in a bootstrap carrousel:

  1. Use data-src instead of src for all but the first image.
  2. Add lazy class to the carousel (optional, just to have an opt-in class for lazy carousels).
  3. At the slide event, set the src attribute on the not-lazy-anymore image.

HTML code:

<div class="carousel slide lazy">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="first-image.jpg" alt="First image">
    </div>
    <div class="item">
      <img data-src="second-image.jpg" alt="Second image">
    </div>
  </div>
</div>

Javascript code:

$(function() {
  return $(".carousel.lazy").on("slide", function(ev) {
    var lazy;
    lazy = $(ev.relatedTarget).find("img[data-src]");
    lazy.attr("src", lazy.data('src'));
    lazy.removeAttr("data-src");
  });
});

Related protips:

Change the Bootstrap NavBar Breakpoint

6 Responses
Add your response

Really great and extremely elegant way :) Thanks for sharing!

over 1 year ago ·

Thank you for sharing.
I think in the current Bootstrap version http://getbootstrap.com/javascript/#carousel the slide function is called 'slide.bs.carousel'.
Now working for me :)

over 1 year ago ·

Your code is really interesting.
In my case, each item of the carousel have more than one image.
So, with this code, instead of having all my images, I just had the first that is repeated. So, if i have 10 images in one page of the carousel, all are the same.
Do you have a solution for that ?
Thanks :)

over 1 year ago ·

i found 2 solutions :
First, you have to put this code just before :
jQuery.fn.extend({
renameAttr: function( name, newName, removeData ) {
var val;
return this.each(function() {
val = jQuery.attr( this, name );
jQuery.attr( this, newName, val );
jQuery.removeAttr( this, name );
// remove original data
if (removeData !== false){
jQuery.removeData( this, name.replace('data-','') );
}
});
}
});
- if you want to load picture with the carousel you add this after :
$(function() {
return $(".carousel").on("slide.bs.carousel", function(ev) {
$(this).find('.loadClick').renameAttr('data-src', 'src' );
});
- if you want to load picture with the modal you add this after :
$(function() {
$('.modal').on("shown.bs.modal", function (e) {
$(this).find('img').renameAttr('data-src', 'src' );
});
});

over 1 year ago ·

Hi! Really cool what you did!
But I`m having the same trouble as @guim, I have multiple images in one slide! But I cant get that to work, even though with the code he posted!
Could you please help me?
Thanks

over 1 year ago ·

It works really well after changing the slide function as suggested in one of the comments. However, I noticed one problem. As the carousel goes to the second or subsequent images, the carousel collapses (to zero height) while the image is being downloaded and then expands back again. This creates a very bad and jarring effect. I found a solution to this here: https://coderwall.com/p/uf2pka/normalize-twitter-bootstrap-carousel-slide-heights

over 1 year ago ·