Question

I have a working bootstrap carousel. And I just realized that images are being loaded in ahead of time even before they are visible to the user. my problem is that I have a looping list of carousels. making my page load slowly. is there a way to only load images that are being requested? via jquery?

Answer 1

You could try setting the ‘src’ once the slid event happens.

$(".carousel").bind("slid", function(){
 $img = $(".active img", this)
 $img.attr("src", $img.data('lazy-load-src'))
}

With HTML

<div class="carousel-inner">
  <div class="active item"><img data-lazy-load-src="/imgs/test.png"/></div>
  <div class="item"><img data-lazy-load-src="/imgs/test2.png"/></div>
  <div class="item"><img data-lazy-load-src="/imgs/test3.png"/></div>
</div>

I believe you’ll want to be agressive in setting the height/width of your item container in CSS, since the browser won’t be loading the image.