文章/答案/技术大牛

发布

社区首页 >问答首页 >旋转滑翔机-移动负载图像

问旋转滑翔机-移动负载图像
EN

Stack Overflow用户

提问于 2015-03-20 10:01:58

回答 1查看 5.1K关注 0票数 1

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

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

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

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

我读过“滑翔机革命文件”，但没有关于我目前情况的例子，也没有足够的技术解释让我知道从哪里开始。

My的想法：使用内置的延迟加载函数加载图像，并带有‘data’属性，但是如何在一个属性中加载多个映像呢？

任何帮助都将不胜感激。

wordpress

revolution-slider

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-03-20 11:29:06

您可以将lazySizes与此部分图片/srcset填充结合使用，也可以与图片填充或呼吸图像结合使用。

然后编写以下标记：

<!-- 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.加载后的简单fadin

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

在加载自旋器时使用fadein (如果您希望支持渐进式jpgs或LQIP，则更倾向于： .lazyload {不透明度: 0；} .lazyloading {不透明: 1；跃迁:不透明300 no；背景：#f7f7f7 url(loader.gif)无重复中心；}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29163860

复制

相似问题

问旋转滑翔机-移动负载图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问旋转滑翔机-移动负载图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问旋转滑翔机-移动负载图像
EN