web-dev-qa-db-ja.com

水平スライダーでの画像の遅延読み込み

このサイトの画像をjquerylazyloadとしきい値で遅延読み込みしています： https://bm-translations.de/#leistungen

//Lazyload Images with Threshold https://www.appelsiini.net/projects/lazyload
$(function() {
    $("img.lazy").lazyload({
        threshold : 400
    });
});

したがって、画像srcはdata-originalに置き換えられます。要素までスクロールすると、srcに変更されます。

しかし、何らかの理由で、ブートストラップスライダーへの画像の読み込みが遅すぎます（クリックしたとき、または一部の画像の自動スライドが読み込まれていません）。あなたが見ることができます。このコードを調整する方法、それでこれにも機能しますか？

スライダーの一般的な構造は次のとおりです。 https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

カルーセルJSは：

$('#myCarousel').carousel({
        interval: 9000,
    });

    // handles the carousel buttons
    $('[id^=carousel-selector-]').click( function(){
      var id_selector = $(this).attr("id");
      var id = id_selector.substr(id_selector.length -1);
      id = parseInt(id);
      $('#myCarousel').carousel(id);
      $('[id^=carousel-selector-]').removeClass('selected');
      $(this).addClass('selected');
    });

    // when the carousel slides, auto update
    $('#myCarousel').on('slide.bs.carousel', function (e) {
      var id = $('.item.active').data('slide-number');
      id = parseInt(id)+1;
      $('[id^=carousel-selector-]').removeClass('selected');
      $('[id=carousel-selector-'+id+']').addClass('selected');
    });

これを試しましたが、スライドしなくなりました：

$('#myCarousel').carousel({
        interval: 9000,
        scroll: {
            onBefore: function( data ) {
              var $current = data.items.visible.first(),
                  visible = data.items.visible,
                  src = visible.data('src');

              visible.attr('src', src);
            }
        }
    });

クリック/自動スライドの前に遅延読み込みするか、少なくともカルーセル画像全体をしきい値で遅延読み込みするように修正するにはどうすればよいですか？

jquerylazy-loadingjquery-lazyload
10
Krystian Manthey

" owl.carousel.js "プラグインを使用することをお勧めします。それははるかに優れており、より多くの機能を備えています。

$('.owl-carousel').owlCarousel({
    items:1,
    lazyLoad:true,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:3000,
    autoplayHoverPause:true,
});
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
</div>
5
Farhad Bagherlo