Revolution Slider-移动的Lazyload图片

Question

问题：由于文档太大而缩小文档时，图像变得模糊。

我试图在窗口宽度达到我指定的值时延迟加载特定的图像。 图像默认为2560px宽。

我正在使用最新的Revolution Slider和最新的Wordpress版本。 图片为.jpg格式，因为它们最小。 图片必须延迟加载，因为有4组不同的媒体查询。

滑块有6张幻灯片，每张需要另外3张或4张图像，这些图像将根据窗口的大小交换出来。

我已经阅读了Slider Revolution Docs，但是没有针对我当前情况的示例，并且没有提供足够的技术性说明让我对从何处入手有所了解。

我的想法：使用内置的带有'data-lazyload'属性的延迟加载功能加载图像，但是我将如何在单个属性中加载多个图像？

任何帮助将不胜感激。

Answer 1

你可以使用lazySizes与用户可以在本部分图片/ srcset填充工具或与任一组合picturefill或respimage 。

然后编写以下标记：

<!-- picture with one implicit density descriptor per srcset -->
<picture>
    <!--[if IE 9]><video hidden=""><![endif]-->
    <source
        data-srcset="http://placehold.it/500x600/11e87f/fff"
        media="(max-width: 480px)" />
    <source
        data-srcset="http://placehold.it/700x300"
        media="(max-width: 700px)" />
    <source
        data-srcset="http://placehold.it/1400x600/e8117f/fff"
        media="(max-width: 1400px)" />
    <source
            data-srcset="http://placehold.it/1800x900/117fe8/fff" />
    <!--[if IE 9]></video(max-width: 1400px)><![endif]-->
    <img
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        class="lazyload"
        alt="image with artdirection" />
</picture>

---

您还可以通过两种方式添加效果：使用lazybeforeunveil事件与浏览器load事件结合使用JS动画，或者使用使用lazyload ， lazyloading和lazyloaded类的CSS Transition / CSS动画添加效果。

这是两个示例：1.加载后简单的fadin

.lazyload,
.lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}

2. 在使用微调器加载时淡入（如果您想支持渐进式jpg或LQIP，则更优选：

   .lazyload {不透明度：0; }
   .lazyloading {不透明度：1; 过渡：不透明度300ms； 背景：＃f7f7f7 url（loader.gif）无重复中心； }