Lazy carousel in bootstrap
Easy-peasy way to lazy load images in a bootstrap carrousel:
- Use
data-srcinstead ofsrcfor all but the first image. - Add
lazyclass to the carousel (optional, just to have an opt-in class for lazy carousels). - At the
slideevent, set thesrcattribute 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:
Written by rewritten2
Related protips
6 Responses
Really great and extremely elegant way :) Thanks for sharing!
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 :)
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 :)
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' );
});
});
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
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
