Revolution Slider-适用于移动设备的懒虫图像

Revolution Slider - Lazyload Images for mobile

本文关键字：图像 Slider- 适用于 移动 Revolution      更新时间：2023-09-26

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

当窗口宽度达到我指定的值时，我试图懒散地粘贴一个特定的图像。默认情况下，图像宽度为2560px。

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

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

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

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

如有任何帮助，我们将不胜感激。

您可以将lazySizes与此部分图片/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、lazyloading和lazyloaded的CSS转换/CSS动画。

以下是两个示例：1.加载后的简单衰减

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

  1. 使用微调器加载时的衰落（如果您想支持渐进式jpgs或LQIP:，则更可取

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

相关文章：