Revolution Slider - 手机延迟加载图像
Revolution Slider - Lazyload Images for mobile
问题:文档宽度缩小时图像变得模糊,因为它们太大了。
我正在尝试在 window 宽度处于我指定的值时延迟加载特定图像。图片默认宽2560px。
我正在使用最新的 Revolution Slider 和最新的 Wordpress 版本。图片为 .jpg 格式,因为它们是最小的。图片必须延迟加载,因为有 4 组不同的媒体查询。
滑块有 6 张幻灯片,每张幻灯片都需要额外的 3 或 4 张图片,这些图片将根据 window 的大小进行换出。
我已阅读 Slider Revolution 文档,但没有针对我当前情况的示例,也没有包含足够的技术解释让我了解从哪里开始。
我的想法:
使用带有 'data-lazyload' 属性的内置延迟加载功能加载图像,但我如何在单个属性中加载多个图像?
如有任何帮助,我们将不胜感激。
你可以使用 lazySizes with either this partial picture/srcset polyfill or in combination with either picturefill or 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 动画,另一种是使用 CSS transition/CSS 动画使用 类 lazyload
、lazyloading
和 lazyloaded
.
这里有两个例子:
1.加载后简单的fadin
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
在加载微调器时淡入淡出(如果你想支持渐进式 jpg 或 LQIP,则首选:
.lazyload{
不透明度:0;
}
.lazyloading {
不透明度:1;
过渡:不透明度 300ms;
背景:#f7f7f7 url(loader.gif) 无重复中心;
}
问题:文档宽度缩小时图像变得模糊,因为它们太大了。
我正在尝试在 window 宽度处于我指定的值时延迟加载特定图像。图片默认宽2560px。
我正在使用最新的 Revolution Slider 和最新的 Wordpress 版本。图片为 .jpg 格式,因为它们是最小的。图片必须延迟加载,因为有 4 组不同的媒体查询。
滑块有 6 张幻灯片,每张幻灯片都需要额外的 3 或 4 张图片,这些图片将根据 window 的大小进行换出。
我已阅读 Slider Revolution 文档,但没有针对我当前情况的示例,也没有包含足够的技术解释让我了解从哪里开始。
我的想法: 使用带有 'data-lazyload' 属性的内置延迟加载功能加载图像,但我如何在单个属性中加载多个图像?
如有任何帮助,我们将不胜感激。
你可以使用 lazySizes with either this partial picture/srcset polyfill or in combination with either picturefill or 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 动画,另一种是使用 CSS transition/CSS 动画使用 类 lazyload
、lazyloading
和 lazyloaded
.
这里有两个例子: 1.加载后简单的fadin
.lazyload,
.lazyloading {
opacity: 0;
}
.lazyloaded {
opacity: 1;
transition: opacity 300ms;
}
在加载微调器时淡入淡出(如果你想支持渐进式 jpg 或 LQIP,则首选:
.lazyload{ 不透明度:0; }
.lazyloading { 不透明度:1; 过渡:不透明度 300ms; 背景:#f7f7f7 url(loader.gif) 无重复中心; }