1

我正在使用带有延迟加载选项的 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

在 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");
  }
});
于 2017-02-16T07:16:20.977 回答
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 回答
0

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

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

于 2019-05-08T15:14:04.590 回答
0

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

于 2021-08-08T07:29:13.313 回答