Bootstrap Carrousel Lazy Load
J'essaie d'avoir le bootstrap Carrousel de chargement différé. Il semble que ce doit être simple, mais je ne suis pas à même de faire des erreurs ici pour résoudre les problèmes. JS:
<script type="text/javascript">
$('#bigCarousel').on("slid", function() {
//load the next image after the current one slid
var $nextImage = $('.active.item', this).next('.item').find('img');
$nextImage.attr('src', $nextImage.data('lazy-load-src'));
});
</script>
Et puis html:
<div id="bigCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<img src="assets/bigimage1.jpg" class="img-big">
</div>
<div class="item">
<img data-lazy-load-src="assets/menu-header2.jpg" class="img-big">
</div>
</div>
</div>
Pas de JS erreurs dans firebug ou autre chose que je peux comprendre, mais mes images ne s'affichent pas. Probablement quelque chose de simple ici...
Pour info: l'événement sur bootstrap 3 est maintenant
double possible de lazy load pas de travail dans le bootstrap carrousel
slid.bs.carousel
par exemple. $('#myCarousel').on("slid.bs.carousel", function() { ...
double possible de lazy load pas de travail dans le bootstrap carrousel
OriginalL'auteur RubyNoob | 2012-10-02
Vous devez vous connecter pour publier un commentaire.
Je pense que le problème est le $ dans votre nextImage var. Sauf si vous essayez de précontrainte 1 diapositive au début, je voudrais aussi passer à un "glissement" de l'événement au lieu de "glissé" de l'événement. Aussi, vous devriez probablement compte pour faire défiler en avant ET en arrière. Cela comprend des contrôles pour une boucle autour de la première photo à la dernière photo, et vice-versa.
Ce sera briser sur la prev si il y a un autre élément après le dernier élément (comme le <a> à partir de l'exemple). Correctif pourrait être de remplacer le sélecteur de frères ci-dessus avec
sibling(".item:last-of-type")
OriginalL'auteur Michael McCabe
La solution la plus simple serait:
Que c'est!
OriginalL'auteur ymakux
J'ai une solution, il vous suffit de définir img-url/chemin d'accès temporaire de l'image de l'attribut,
voir le code ci-dessous img a attribut url
lors de l'événement glissé, réglez la valeur : src = url
OriginalL'auteur Harry S
Vous êtes chargement
$nextImage.data('lazy-load-src')
mais il devrait être$nextImage.data('data-lazy-load-src')
en fonction de script.$nextImage.data('lazy-load-src')
est correctoui j'aime ça, tis réponse...
pour moi, il ne fonctionne pas avec le "glissé". Si l'utilisation avec " slide.bs.carrousel de travail de l'amende. Thx @Sameera Thilakasiri
OriginalL'auteur Sameera Thilakasiri
J'ai créé gratuitement un petit extrait de code afin d'avoir un chargement différé du carrousel à l'aide de bootstrap.
Le code est sur github https://github.com/mconventi/lazy-load-bootstrap-carousel
Il comprend un exemple de travail.
Sentir libre de l'utiliser et de le personnaliser 😉
OriginalL'auteur mconventi