Question

我正在使用带有lazyload选项的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 : ["", ""],
   });
});

Answer 1

不确定为什么，但我的第一项是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;
    }

});

Answer 2

在al404IT回答后，我设法让旋转木马以这种方式预加载下一张图像。当我显示下一个图像的一部分时，我还需要使下一个图像可见。

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

Answer 3

文档提供了lazyLoadEager选项：https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

因此，在选项中添加“ lazyLoadEager：1”应该可以解决问题。

Answer 4

lazyLoadEager 类型：数字默认值：0

根据您要预加载的项目数量，急切地将图像预加载到右侧（启用循环时向左侧）。

在 owl.carousel.min.js 中，您应该通过搜索找到该行：lazyLoad

// e.Defaults={lazyLoad:!1,lazyLoadEager:0},
//False -> !1 : 1 is true so you should try with 1 in case that is not taking true as a parameter that you are passing on init. Lazy Load Eager represents the number of elements that you want to preload for example, two images, so you might want to try with setting that by default too.
    e.Defaults={lazyLoad:!1,lazyLoadEager:2},


/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */

一个演示，但我根本看不到它的工作，可能是因为当前不存在图像占位符，但至少可以直接从开发人员处为您提供有关如何操作的提示。

>

https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html

OwlCarousel预装图像在背景中

4 个答案: