如何在 JQuery lightSlider 中延迟加载图像？

Question

我目前有一个滑块 (JQuery lightSlider)，其中包含很多图像并且一次显示一个。这显着增加了我的页面加载时间。我需要对图像应用延迟加载，以便只加载可见图像和任一侧。

我试过 this Github issue 中提供的示例，但是，它们似乎都只处理一次显示一张图像。

示例（箭头可见性为红色背景）：

$("#lightSlider").lightSlider({
  item: 4,
  autoWidth: false,
  slideMargin: 1,
  mode: "slide",
  useCSS: true,
  cssEasing: 'ease',
  easing: 'linear',
  auto: true,
  loop: true,
  slideEndAnimation: true,
  pause: 4000,
  pauseOnHover: true,
  pager: false,
  enableDrag: false
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>

<ul id="lightSlider" style="background: red;">
  <li><img src="https://picsum.photos/100?random=1"></li>
  <li><img src="https://picsum.photos/100?random=2"></li>
  <li><img src="https://picsum.photos/100?random=3"></li>
  <li><img src="https://picsum.photos/100?random=4"></li>
  <li><img src="https://picsum.photos/100?random=5"></li>
  <li><img src="https://picsum.photos/100?random=6"></li>
  <li><img src="https://picsum.photos/100?random=7"></li>
  <li><img src="https://picsum.photos/100?random=8"></li>
</ul>

Answer 1

我利用了window.IntersectionObserver。

我使用 rootMargin 来扩展 root 元素的边界框。这允许向左或向右加载一张图像。

一旦幻灯片中的图像进入扩展边界框，它的 data-src 属性用于设置 src 并加载图像。它将加载所有可见图像和一张附加图像在每一侧（以防止显示丢失的图像）。

onSliderLoad: function (el) {
    var showActiveSlides = function (entries) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                entry.target.src = entry.target.dataset.src;
                observer.unobserve(entry.target);
            }
        });
    };

    var imageWidth = el.find("li").outerWidth() + "px";

    var observer = new window.IntersectionObserver(showActiveSlides, {
        root: el.parent()[0],
        rootMargin: "0px "+ imageWidth + " 0px " + imageWidth
    });

    el.find("li img").each(function () {
        observer.observe(this);
    });
}

$("#lightSlider").lightSlider({
  item: 4,
  autoWidth: false,
  slideMargin: 1,
  mode: "slide",
  useCSS: true,
  cssEasing: 'ease',
  easing: 'linear',
  auto: true,
  loop: true,
  slideEndAnimation: true,
  pause: 4000,
  pauseOnHover: true,
  pager: false,
  enableDrag: false,
  onSliderLoad: function(el) {
    var showActiveSlides = function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.src = entry.target.dataset.src;
          observer.unobserve(entry.target);
        }
      });
    };

    var imageWidth = el.find("li").outerWidth() + "px";

    var observer = new window.IntersectionObserver(showActiveSlides, {
      root: el.parent()[0],
      rootMargin: "0px " + imageWidth + " 0px " + imageWidth
    });

    el.find("li img").each(function() {
      observer.observe(this);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>

<ul id="lightSlider" style="background: red;">
  <li><img data-src="https://picsum.photos/100?random=1"></li>
  <li><img data-src="https://picsum.photos/100?random=2"></li>
  <li><img data-src="https://picsum.photos/100?random=3"></li>
  <li><img data-src="https://picsum.photos/100?random=4"></li>
  <li><img data-src="https://picsum.photos/100?random=5"></li>
  <li><img data-src="https://picsum.photos/100?random=6"></li>
  <li><img data-src="https://picsum.photos/100?random=7"></li>
  <li><img data-src="https://picsum.photos/100?random=8"></li>
</ul>

如何在 JQuery lightSlider 中延迟加载图像？

How do I lazy load images in JQuery lightSlider?

jquery

lazy-loading