对于有较多图片的网页，如果我们一次把图片全部加载完会严重影响页面加载速度和浪费带宽的，在这种情况下就需要用到懒加载。懒加载的实现原理是，在可视区域内的图片先加载出来，没有在可视区内的图片先用一张默认的小图片代替。随着页面的滑动，下边的图片逐步替换成真实的图片。很多网站都用了懒加载技术。下边是唯品会首页使用懒加载展示：
文章图片
jQuery LazyLoad官网参考地址
基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。
使用方法：
需要先引入jquery和jquery.lazyload两个js文件
【前端性能优化|javascript 图片懒加载】页面上需要用到懒加载的图片要这样改写代码，要加上class="lazy"，真实图片链接地址写在data-original里，src里是我们想要显示的默认小图片,注意图片要加上宽度和高度，避免真实图片和默认图片大小不一致造成页面布局错位。
文章图片
在js中要这样调用lazyload
$('img.lazy').lazyload();
本文只是粗略的介绍一下懒加载的使用方法，如果想了解更多懒加载请参考下边这篇文章
插件下载地址：http://code.ciaoca.com/jquery/lazyload/
layzr官网参考地址
layzr.js 是一个很小、速度快、无依赖的，用于浏览器图片延迟加载的库，不需要依赖jquery，也更适合移动端。
使用方法：
引入js文件
页面上需要用到懒加载的图片要这样改写代码
文章图片
js中调用layzr
var layzr = new Layzr({
selector: '[data-layzr]',
attr: 'data-layzr',
retinaAttr: 'data-layzr-retina',
threshold: 10,
callback: function () {
this.classList.add('border');
}
});
参考地址：点击打开链接
推荐阅读
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- JS/JavaScript|JS/JavaScript CRC8多项式 16进制
- JS|VUE学习笔记[30-46]
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- 地图|高德地图清除指定覆盖物 自定义覆盖物样式（完整dome）
- Pyecharts|Pyecharts 猎聘招聘数据可视化
- flex|C语言-使用goto语句从循环中跳出
- HTML+Js实战项目|在网页中实现icon小图标的几种方法
- js中国标准时间转化为年月日，时间戳