Carrossel preguiçoso no bootstrap

Maneira fácil de carregar imagens lentamente em um carrossel de bootstrap:

1. Use em data-srcvez de srcpara todas, exceto a primeira imagem.
2. Adicionar lazyclasse ao carrossel (opcional, apenas para ter uma classe opcional para carrosséis preguiçosos).
3. No slideevento, defina o srcatributo na imagem not-lazy-anymore.

Código HTML:

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

Código Javascript:

$(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");
  });
});

Respostas relacionadas:

Alterar o ponto de interrupção do Bootstrap NavBar