1

lazyload オプションを true にして owlcarousel 2 を使用しています。ユーザーがカルーセルの最初の画像を見ている間にバックグラウンドで次のスライド画像のプリロードを開始したいので、ユーザーはローダーを表示せず、次のスライドで読み込まれた画像を直接見ることができます

ここに私のhtmlコードがあります

<div class="inner-gallery">
  <div id="inner-gallery">
   <div class="gallery-item">
         <div class="gallery-item2">  
           <img class="lazyOwl" data-src="<?php echo $image[0]; ?>" alt=""/>
         </div>
   </div>
  </div>
</div>

ここに私のJavaScriptコードがあります

$(document).ready(function(){
   $("#inner-gallery").owlCarousel({
    navigation : true, // Show next and prev buttons
    autoPlay : false,
    slideSpeed : 300,
    lazyLoad:true,
    paginationSpeed : 400,
    singleItem:true,
    autoHeight : true,
    navigationText : ["", ""],
   });
});
4

4 に答える 4

2

理由はわかりませんが、最初の項目が 2 であるため、合計を 2 ずつ増やす必要がありました

var mycarousel = $('#inner-gallery');

mycarousel.on('loaded.owl.lazy', function(event) {

    var nextpic = new Image();
    var totitem = event.item.count + 2;     
    var nextitem = event.item.index + 1;

    if (nextitem <= totitem) {
        var imgsrc = $(event.target).find('.gallery-item').eq(nextitem).find('img').data('src');
        nextpic.src = imgsrc;
    }

});
于 2015-12-21T15:43:38.047 に答える