Slick Slider 延迟加载问题答案

【问题标题】：Slick Slider lazy load issueSlick Slider 延迟加载问题
【发布时间】：2020-08-12 19:46:04
【问题描述】：

我似乎无法通过 Slick.js Carousel 进行延迟加载。当我检查 devtools 窗口中的 Network 选项卡时，我可以看到图像延迟加载，但它们没有出现在轮播的页面上。我正在使用 data-lazy 属性，并尝试将第一张幻灯片制作为“src”而不是“data-lazy”，但似乎没有什么对我有用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<!-- Slick slider css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
</head>
<body>
    <section class="slickshow carousel">
    <!--slide-->
    <div class="slide"><img data-lazy="https://via.placeholder.com/1440x500?text=Placeholder+Image">
      <h2>SUMMERTIME SAVINGS</h2>
      <p>100s of Items On Sale!</p>
      <p><a href="#">Shop the Sale Now!</a></p>
    </div>
    <!--slide-->
    <div class="slide"><img data-lazy="https://via.placeholder.com/1440x500?text=Another+One">
    </div>
    <!--slide-->
    <div class="slide"><img data-lazy="https://via.placeholder.com/1440x500?text=Placeholder+Image">
      <h2>MORE SAVINGS</h2>
      <p>More Text Too!</p>
      <p><a href="#">Shop Now</a></p>
    </div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
  <script>
    jQuery(document).ready(function() {
      jQuery(".slickshow").slick({
        lazyLoad: 'ondemand',
        slide: '.slide',
        autoplay: true,
        autoplaySpeed: 5000,
        dots: true,
        // string (html|jQuery selector) | object (DOM node|jQuery object)
        prevArrow: '<button type="button" class="slick-next">&#10094</button>',
        nextArrow: '<button type="button" class="slick-next">&#10095</button>',
        speed: 1000,
        fade: true,
        cssEase: 'linear',
        slidesToShow: 1,
        adaptiveHeight: true,
        swipe: true,
        swipeToSlide: true,
        infinite: true
      });
    });
    // On swipe event
    jQuery('.slickshow').on('swipe', function(event, slick, direction) {
      console.log(direction);
      // left
    });
    // On edge hit
    jQuery('.slickshow').on('edge', function(event, slick, direction) {
      console.log('edge was hit')
    });
    // On before slide change
    jQuery('.slickshow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
      console.log(nextSlide);
    });
  </script>
</body>
</html>

【问题讨论】：

标签： javascript html slideshow slick.js

【解决方案1】：

如果滑块进入视口，您可以使用IntersectionObserver 方法延迟加载图像。

这是一个如何实现它的示例：

source with some more explanation

let slickSliders = document.querySelectorAll('.slick-slider');

if ('IntersectionObserver' in window) {
  // IntersectionObserver Supported
  let config = {
        root: null,
        rootMargin: '0px',
        threshold: 0.0
      };

  let observer = new IntersectionObserver(onChange, config);
  slickSliders.forEach(slider => observer.observe(slider));

  function onChange(elements, observer) {
    elements.forEach(element => {
      if (element.isIntersecting) {
        console.log("element intersecting", element.target);
        
          var options = {};
        // Stop watching and load the slickSlider
        loadSlick(element.target, options);
        observer.unobserve(element.target);
      }
    });
  }

} else {
  // IntersectionObserver NOT Supported
  slickSliders.forEach(slickSlider => loadSlick(slickSlider));
}

function loadSlick(slickSlider, options) {
    $slickSlider = $(slickSlider);
    $slickSlider.slick(options);
}

h1, h2{
  text-align: center;
  color: white;
}
body{
  background: url("https://informatikspickzettel.de/wp-content/uploads/informatikspickzettel.de-background-2400765-1920.jpg");
}
.spacer{
  display: block;
  width: 100%;
  height: 100vh;
  background: rgba(255,255,255,0.7);
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  margin: 50px 0;
}
.slick-slider{
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.item{
  background: lightgray;
  height: 300px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />
<h1>Slick-Slider Initialization on Intersection</h1>
<h2>Scroll down</h2>
<a href="https://informatikspickzettel.de" class="spacer">
  <img src="https://informatikspickzettel.de/wp-content/uploads/informatikspickzettel.de-informatikspickzettel-logo.png" alt="Informatikspickzettel.de">
</a>

<div class="slick-slider slider1">
  <div class="item"><img data-lazy="https://via.placeholder.com/300.png/09f/fff" alt="placeholder" /></div>
  <div class="item"><img data-lazy="https://via.placeholder.com/300/02f/fff" alt="placeholder" /></div>
  <div class="item"><img data-lazy="https://via.placeholder.com/300/04f/fff" alt="placeholder" /></div>
</div>

<a href="https://informatikspickzettel.de" class="spacer">
  <img src="https://informatikspickzettel.de/wp-content/uploads/informatikspickzettel.de-informatikspickzettel-logo.png" alt="Informatikspickzettel.de">
</a>

<div class="slick-slider slider2">
  <div class="item"><img data-lazy="https://via.placeholder.com/300/c4f/fff" alt="placeholder" /></div>
  <div class="item"><img data-lazy="https://via.placeholder.com/300/c2f/fff" alt="placeholder" /></div>
  <div class="item"><img data-lazy="https://via.placeholder.com/300/c6f/fff" alt="placeholder" /></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

【讨论】：

【解决方案2】：

我能够通过将jquery.min.js 换成您的jquery.slim.min.js 来加载图像。在下面试一试。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<!-- Slick slider css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
</head>
<body>
    <section class="slickshow carousel">
    <!--slide-->
    <div class="slide"><img data-lazy="https://via.placeholder.com/1440x500?text=Placeholder+Image">
      <h2>SUMMERTIME SAVINGS</h2>
      <p>100s of Items On Sale!</p>
      <p><a href="#">Shop the Sale Now!</a></p>
    </div>
    <!--slide-->
    <div class="slide"><img data-lazy="https://via.placeholder.com/1440x500?text=Another+One">
    </div>
    <!--slide-->
    <div class="slide"><img data-lazy="https://via.placeholder.com/1440x500?text=Placeholder+Image">
      <h2>MORE SAVINGS</h2>
      <p>More Text Too!</p>
      <p><a href="#">Shop Now</a></p>
    </div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
  <script>
    jQuery(document).ready(function() {
      jQuery(".slickshow").slick({
        lazyLoad: 'ondemand',
        slide: '.slide',
        autoplay: true,
        autoplaySpeed: 5000,
        dots: true,
        // string (html|jQuery selector) | object (DOM node|jQuery object)
        prevArrow: '<button type="button" class="slick-next">&#10094</button>',
        nextArrow: '<button type="button" class="slick-next">&#10095</button>',
        speed: 1000,
        fade: true,
        cssEase: 'linear',
        slidesToShow: 1,
        adaptiveHeight: true,
        swipe: true,
        swipeToSlide: true,
        infinite: true
      });
    });
    // On swipe event
    jQuery('.slickshow').on('swipe', function(event, slick, direction) {
      console.log(direction);
      // left
    });
    // On edge hit
    jQuery('.slickshow').on('edge', function(event, slick, direction) {
      console.log('edge was hit')
    });
    // On before slide change
    jQuery('.slickshow').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
      console.log(nextSlide);
    });
  </script>
</body>
</html>

【讨论】：

解决了您的问题吗？