OwlCarousel预载图片在背景中 [英] OwlCarousel preload image in background

问题描述

我正在使用带有lazyload选项为true的owlcarousel 2，我想在用户看到轮播的第一个图像的同时开始在后台预加载下一张幻灯片的图像，这样用户就看不到加载程序，而直接在下一张幻灯片中看到加载的图像

I'm using owlcarousel 2 with lazyload options true, i want to start preloading of next slides images in background while user seeing first image of carousel so user doesn't see the loader and directly see the loaded image in next slides

这是我的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代码

here is my javascript code

$(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 : ["", ""],
   });
});

推荐答案

遵循al404IT答案我设法使轮播以这种方式预加载了下一个图像. 在显示下一张图像的一部分时，我还需要使下一张图像可见.

following al404IT answer I managed to have the carousel preloading the next image in this way. As I'm showing a portion of the next image I also needed to make the next image visible.

mycarousel.on('loaded.owl.lazy', function(event) {
    var totitem = event.item.count + 2;
  var nextitem = event.item.index + 1;
  if (nextitem <= totitem) {
    var imgsrc = $(event.target).find('.item').eq(nextitem).find('img').data('src');
    console.log($(event.target).find('.item').eq(nextitem).find('img').attr("src"));
    $(event.target).find('.item').eq(nextitem).find('img').attr("src", imgsrc).css("opacity", "1");
  }
});

这篇关于OwlCarousel预载图片在背景中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！