1

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

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

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

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

我已经阅读了 Slider Revolution Docs，但没有针对我当前情况的示例，并且没有包含足够的技术解释让我知道从哪里开始。

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

任何帮助将不胜感激。

4

1 回答 1

2

您可以将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与浏览器事件结合的事件的 JS 动画，另一种是使用类和的loadCSS 过渡/CSS 动画。lazyloadlazyloadinglazyloaded

这里有两个例子： 1. 加载后的简单淡入淡出

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

  1. 使用微调器加载时淡入淡出（如果您想支持渐进式 jpg 或 LQIP，则更可取：

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

于 2015-03-20T11:29:06.290 回答