文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Slick延迟加载问题

问Slick延迟加载问题
EN

Stack Overflow用户
提问于 2020-08-13 03:46:04
回答 2查看 4.2K关注 0票数 0

在Slick.js旋转木马工作的情况下，我似乎不能进行延迟加载。当我检查devtools窗口中的Network选项卡时，我可以看到图像延迟加载，但它们没有出现在转盘中的页面上。我使用了data-lazy属性，并尝试将第一张幻灯片改为"src“而不是"data-lazy"，但似乎没有一张幻灯片适合我。

代码语言：javascript
复制
<!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>
html
slideshow
slick.js
javascript
EN

回答 2

Stack Overflow用户

发布于 2020-08-13 08:19:13

我可以通过将jquery.min.js换成你的jquery.slim.min.js来加载图片。在下面试一试。

​

代码语言：javascript
复制
<!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>

​

票数 0
EN

Stack Overflow用户

发布于 2021-01-27 06:21:38

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

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

source with some more explanation

​

代码语言：javascript
复制
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);
}
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63383731

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档