Responsively Lazy 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Responsively Lazy 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Responsively Lazy 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 Alias_Travis
适用人群 未知
收录时间 2021-09-22

软件简介

Responsively Lazy 是一个可以延迟加载响应式图像的库。能够处理响应式图像、SEO 友好(有效的 HTML)并支持 WebP 格式。

下载并安装

下载缩小后的 css 和 js 文件或通过 npm 和 bower 安装

npm install responsively-lazy
bower install responsively-lazy

该库没有任何依赖项,它只有 1.1kb。

用法

  • 在 head 标签中包含 css 文件
<link rel="stylesheet" href="responsivelyLazy.min.css">
  • 在 body 标签结束前包含 js 文件
<script async src="responsivelyLazy.min.js"></script>
  • 为每张图片添加以下代码
<div class="responsively-lazy" style="padding-bottom:68.44%;">
    <img alt="" src="images/2500.jpg" data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
</div>

要自定义的内容是 padding-bottom 样式,以及 src 和 data-srcset 属性的值。如果不知道图像纵横比,可以跳过 div 标签并将 Responsively Lazy 类移动到 img 标签:

<img class="responsively-lazy" alt="" src="images/2500.jpg" data-srcset="images/400.jpg 400w, images/400.webp 400w, images/600.jpg 600w, images/1000.jpg 1000w" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />

如果浏览器支持,可以以 WebP 格式列出图像版本。

浏览器支持

Responsively Lazy 适用于支持 srcset 属性的浏览器。不受支持的浏览器将在 src 属性中加载图像。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2016/11/09 20:07

hibernate---->lazy

hibernate lazy策略 hibernate lazy策略可以使用在: *<class>标签上,可以取值:true/false <property>标签上,可以取值:true/false,指定实例变量第一次被访问时,这个属性是否延迟抓取,需要运行时字节码增强。 * <set><list>标签上,可以取值:true/false/extra *<one-to-one><many-to-one>单端关联上,可以取值:false/proxy/noproxy lazy概念:只有真正使用该对象时,才会创建,对于hibernate而言,正真使用的时候才会发...

0
0
2020/05/12 16:17

@Lazy 注解

Spring IoC (ApplicationContext) 容器一般都会在启动的时候实例化所有单实例 bean 。如果我们想要 Spring 在启动的时候延迟加载 bean,即在调用某个 bean 的时候再去初始化,那么就可以使用 @Lazy 注解。 @Lazy 的属性 value 取值有 true 和 false 两个 默认值为 true true 表示使用 延迟加载, false 表示不使用,false 纯属多余,如果不使用,不标注该注解就可以了。 Person 类 public class Person { private Strin...

0
0
发表了博客
2018/02/07 16:13

Lazy方法

Swift标准库有一组lazy方法,或者说是计算属性,可以把map和filter这类接受闭包运行的方法实现延时运行。对于运行代价很大的情况,它可以起到不小的性能提升作用。 本来不使用lazy是这样的: let data = 1 ... 3 let result = data.map { (a) -> Int in print("正在处理\(a)") return a * a } print("准备访问结果") for i in result.reversed() { print("操作后的结果为\(i)") } print("操作完毕"...

0
0
发表于服务端专区
2014/08/18 19:35

hibernate lazy加载

HIBERNATE的持久化对象加载策略。 延迟加载, 也就是用到的时候才去加载.这样可以提高一些性能. Hibernate的lazy loading 采用了一个HibernateSession来管理session,它的逻辑是每进行一次数据库操作,就开新的session,操作完成后立即关闭该session。这样做的好处是可以严格关闭session,避免菜鸟级的错误,但是hibernate.org并不推荐这么做。因为这不适合lazy loading,也不适合跨方法的事务。 比如在我们的应用中,user->pos...

0
0
发表了博客
2019/04/10 10:10

C# Lazy Loading

前言 按需加载对象延迟加载实际是推迟进行创建对象,直到对其调用后才进行创建初始化,延迟(懒加载)的好处是提高系统性能,避免不必要的计算以及不必要的资源浪费。 常规有这些情况: 对象创建成本高且程序可能不会使用它。 例如,假定内存中有具有 Orders 属性的 Customer 对象,该对象包含大量 Order 对象,初始化这些对象需要数据库连接。 如果用户永远不要求显示 Orders 或在计算中使用该数据,则无需使用系统内存或计算周...

0
0
发表了博客
2020/04/19 20:37

Scala的关键字Lazy

Scala中使用关键字lazy来定义惰性变量,实现延迟加载(懒加载)。 惰性变量只能是不可变变量 val,并且只有在调用惰性变量时,才会去实例化这个变量。同理参考下 浏览大型网页时加载方式。 在Java中,要实现延迟加载(懒加载),需要自己手动实现。一般的做法是这样的: public class JavaLazyDemo { private String name; //初始化姓名为huangbo private String initName(){ return "huangbo"; } pub...

0
0
发表了博客
2019/04/28 17:11

Lazy 延迟加载

问题:最近遇到一个项目遇到一个问题(很久的项目,现阶段主要维护),程序初始化的时候比较慢,最后查原因的时候发现是因为一个类的构造方法里面有些逻辑, 解决办法:希望在使用的时候再进行加载,最后想到了延迟加载(Lazy) 一、由于实际项目不好贴源代码,先简单模拟数据 public class Student { public Student() { this.Name = "DefaultName"; this.Age = 0; Thread.Sleep(2000);...

0
0
发表了博客
2013/01/24 17:21

Lazy Table Images

异步下载和显示在列表中的图像。当列表有很多行的时候,每一行都有一幅图的时候,异步下载和显示这些图像能够让程序流畅运行,用户不需要等待全部图像下载完毕才能进行操作。 Code4App编译测试,测试环境:Xcode 4.3, iOS 5.0。 转载:http://www.adobex.com/ios/source/details/00000042.htm

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部