Question

问题：当文档宽度因太大而缩小时，图像会变得模糊。

当窗口宽度处于我指定的值时，我试图延迟加载特定图像。默认情况下，图像宽度为2560像素。

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

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

我已经阅读过Slider Revolution Docs，但我目前的情况并没有例子，也没有足够的技术解释让我知道从哪里开始。

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

非常感谢任何帮助。

Answer 1

您可以将lazySizes与partial picture/srcset polyfill结合使用，也可以与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使用CSS过渡/ CSS动画，lazyloading和lazyloaded。

以下是两个例子： 1.加载后的简单fadin

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

使用微调器加载时fadein（如果你想支持渐进式jpgs或LQIP，则更受欢迎：

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

Revolution Slider - 用于移动设备的Lazyload图像

1 个答案: