Question

虽然OwlCarousel2内置了延迟加载功能，但它并不理想，因为它加载的图像尚未在视图中，即，将从给定的轮播加载前x个量然后延迟加载。

因此，想要使用像jquery.lazy()这样的外部插件来仅加载视图中的图像。但是，当我实现它时，幻灯片放映高度会过度放大。此外，奇怪的是，看起来首先加载幻灯片的最后一个图像。

那么，我怎样才能让OwlCarousel2与jQuery.lazy或其他类似性质的插件很好地配合使用？

我的代码

有关插图，请参阅this codepen。

$(document).on("ready", function() {
  var mainslider = $("#mainSlider").owlCarousel({
    items: 1,
    autoplayHoverPause: true,
    autoHeight: false,
    loop: true,
    lazyLoad: false,
    autoplay: false,
    autoplayTimeout: 1500,
    margin: 0,
    autoplayspeed: 900,
    smartSpeed: 900,
    dots: true,
    onTranslated: function(){
      lazy.update();
    },
    onInitialize: function(){
      // console.log($(this.$element));

    },
     onInitialized: function(){

      console.log("Main Slider height after intialise:" + $(this.$element[0]).height());
    }
  });
  var lazy = $(".lazy").lazy({
    chainable: false,
    effect: "fadeIn",
    effectTime: 0,
    enableThrottle: true,
    throttle: 250,
    threshold: 0,
    visibleOnly: true,
    afterLoad: function(element) {
      if (element.parents("div#mainSlider").length) {
        mainslider.trigger('refresh.owl.carousel');
      }

    },
    onError: function(element) {
      console.log("error loading " + element.data("src"));
    },
    beforeLoad: function(element) {
                var imageSrc = element.data('src');
                console.log('image "' + imageSrc + '" is about to be loaded');
            }
  });


  var owl = $(".vp-product").owlCarousel({
    lazyLoad: false,
    items: 4,
    navigation: true,
    dots: false,
    margin: 20,
    responsiveClass: true,
    stagePadding: 20,
    responsiveBaseWidth: ".vp-product",
    responsive: {
      0: { items: 2, nav: true },
      600: { items: 3, nav: true },
      1000: { items: 4, nav: true, loop: false }
    }
  });

});

更新我曾尝试使用Lazysizes插件，但我似乎正在加载尚未查看的图像。

例如，如果您查看我放在一起的笔here;您将看到首先加载的棕褐色图像以及下面的轮播：图像1-4在视图中（如果在宽度大于1000px的设备上查看，或者如果600px-999px则为1-3，如果小于600则为2）。现在，查看我的1364px宽铬浏览器的网络面板，我可以看到图像1-5在滚动到视图时被加载，然后在图像6也被奇怪地加载后很少，即使我根本没有滚动旋转木马。

OwlCarousel2与jquery.Lazy打破主幻灯片

0 个答案: