使用slick.js的lazySizes
使用slick.js的lazySizes
提问于 2017-02-09 05:57:57
我在试着让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>这是我的巧妙初始化
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplaySpeed: 2500,
speed: 3500,
fade: true,
arrows: false,
dots: false,
pauseOnHover: false,回答 1
Stack Overflow用户
发布于 2019-06-27 17:46:09
尝试使用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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42124425
复制相关文章
相似问题
腾讯云开发者
