Question

我正在尝试使用lazySizes来使用slick.js。有没有人有任何解决方案来使这项工作。我有一个滑块，上面有大约40个图像，我想根据需要或下一张幻灯片即将出现时延迟加载图像。我实际上创建了一个带有lazySizes的响应式背景滑块。我的滑块工作除了延迟加载部分，在页面加载时它一次加载所有40个图像。

 <div class="full-screen-hero-background media-cover background-cover lazyload"
                 data-bgset="<?php echo $slider_image['sizes']['slider-image-small']; ?> [(max-width: 960px)] |
                        <?php echo $slider_image['sizes']['slider-image']; ?> [(max-width: 1280px)] |
                        <?php echo $slider_image['sizes']['slider-image-retina']; ?>"
                 data-sizes="auto" role="img" aria-label="<?php the_title(); ?>">
            </div>

这是我的slick init

        autoplay: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplaySpeed: 2500,
        speed: 3500,
        fade: true,
        arrows: false,
        dots: false,
        pauseOnHover: false,

Answer 1

尝试使用data-srcset=""属性，而不是data-bgset=""

<!-- responsive example with automatic sizes calculation: -->
<img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" />

详细了解以下内容： https://github.com/aFarkas/lazysizes#user-content-how-to

lazySizes with slick.js

1 个答案: