layzr.js新版使用方法

标签：

转载请注明出处：
http://www.cnblogs.com/fiter/p/5413919.html

前言

今天研究这个JS库，本人新手，将官方的js代码下载下来后始终无法正常使用，经过多番尝试，终于找到一个可以用的新版代码，在这里分享https://github.com/xibudu/layzr

目录

1. layzr介绍
2. layzr的基本使用
3. Layzr的注意事项

1. layzr介绍

layzr.js 是一个很小、速度快、无依赖的，用于浏览器图片延迟加载的库。

我们找到Layzr.js官方的Github上面，dist目录发布的 layzr.min.js 仅有 4 KB。同时，发现 package.json 文件，没有任何的dependencies依赖。

用layzr.js进行图片延迟加载，是非常方便的。通过配置选项，实现最大化的加载速度。layzr.js对于滚动事件已去抖，以尽量减少对浏览器的压力，以确保最佳的渲染。

项目官方网站：http://callmecavs.com/layzr.js/

2. layzr的基本使用

在HTML中，图片是用img标签在控制的，要用到Layzr.js库，需要在img标签中增加属性，同时引入Layzr.js库就可以了，不需要再创建对象

<img data-normal="http://callmecavs.com/layzr.js/images/demo/1.jpg" data-retina="http://callmecavs.com/layzr.js/images/demo/1-retina.jpg" data-srcset="http://callmecavs.com/layzr.js/images/demo/1.jpg 1x, http://callmecavs.com/layzr.js/images/demo/1-retina.jpg 2x">

• src: 用于定义图像占位符，如果没有定义图像占位符，那么在图像载入前，可能会显示异常。
• data-normal: 用于显示的图像
• data-retina: 用于显示retina屏幕图像的延迟加载。
• data-srcset: 参见<img>的srcset属性https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

3. layzr的注意事项

layzr监听滚动事件，所以要把延迟显示的图片放到需要滚动的页面上图片才会被加载，否则图片将不会显示。

转载请注明出处：
http://www.cnblogs.com/fiter/p/5413919.html

layzr.js新版使用方法

标签：

原文地址：http://www.cnblogs.com/fiter/p/5413919.html