问题：

滑动条延迟加载问题

殷永嘉

2023-03-14

我似乎不能得到懒惰加载与Slick.js旋转木马工作。我可以看到图像懒惰加载时，我检查的网络选项卡中的开发工具窗口，但他们没有出现在页面上的轮播。我正在使用数据懒惰属性，并尝试制作第一张幻灯片“src”而不是“数据懒惰”，但似乎没有什么对我有用。

<!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>

共有2个答案

杨志强

2023-03-14

如果滑块进入视口，您可以使用Intersection观察员方法来lazyload图像。

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

来源：更多解释

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;
}

html prettyprint-override"><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>

羊毅庵

2023-03-14

我可以通过将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>

类似资料：

延迟加载和Hibernate.initialize（）问题；

我有一个类，其中包含一个延迟加载的属性
延迟加载

描述 (Description) 延迟加载可应用于图像，背景图像和淡入效果，如下所述 - 对于图像要在图像上使用延迟加载，请按照给定的步骤进行操作 - 使用data-src属性而不是src属性来指定图像源。将类lazy添加到图像。 <div class = "page-content"> ... <img data-src = "image_path.jpg" class = "l
JSF2 Primeface： DataTable延迟加载问题

我想，我的java代码是正确的，但记录并没有显示在dataTable上。请检查下面的代码。我不知道我在哪里犯了错误。 .xhtml JAVA getResultList getResultList方法返回一个正确的值，我调试它。我认为问题在于userDataList。
JPA延迟加载

问题内容：我在JPA实体中的延迟加载属性有问题。我读过许多类似的问题，但它们与spring或hibernate有关，并且他们的后代不适用或没有帮助。该应用程序是在Wildfly应用程序服务器上运行的JEE和JPA2.1。有两个实体，DAO会话bean和servlet将它们放在一起：当我运行此代码时，它失败并显示：我对WebLogic / JPA1使用了非常相似的模式，并且运行平稳。任何的想
延迟加载node.js

问题内容：我想知道在node.js中使用是否等效于延迟加载？例如，如果我有一个函数需要代码中其他任何地方都不需要的特定node.js包，那么我最好在该函数内部使用它，以便仅在调用该函数时才包含所需的包。我还不确定是否会由于缺乏对node.js架构的了解而在性能方面有所改善？我想它每次与服务器的连接都会使用更少的内存。但是，当它必须读取程序包时，它会增加磁盘的I / O吗，还是将其添加到内存中
延迟加载FXProperties

这是从这里开始的后续行动。我正在实现一个表，它将数据异步加载到表单元格中。问题是，表单元格有时无法正确更新。有时它会以某种方式“挂起”并永远显示“加载...”。实际值只有在我在表中滚动一点时才会更新。要复制，请在表格中快速向下滚动应用程序。某些单元格不会显示“延迟加载”值，而是显示占位符字符串。延迟加载属性如下所示： } 应用程序如下所示：完整的可运行代码可以在这里找到。

滑动条延迟加载问题

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档