JS实现图片懒加载

JS实现图片懒加载

懒加载技术

懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。

原理：页面加载后只让文档可视区内的图片显示，其它不显示，随着用户对页面的滚动，判断其区域位置，生成img标签，让到可视区的图片加载出来。

所用相关技术：给img加属性 (例如data-src），将图片的地址赋值给他，这样就生成img标签后再把data-src的值赋给img的src（通过dataset.src或者getAttribute('src'),再赋值给img.setAttribute('src')）。

 

jqueryLazyload方式

下载链接：https://pan.baidu.com/s/1gyIzuHPfE7xvztwd8v8qGg 密码：48kw

 

echo.js方式

echo.js是一款非常简单实用轻量级的图片延时加载插件，如果你的项目中没有依赖jquery，那么这将是个不错的选择，50行代码，压缩后才1k。当然你完全可以集成到自己项目中去。

下载地址：https://github.com/helijun/helijun/tree/master/plugin/echo

说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。

 

更多阅读：

JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)：https://www.jb51.net/article/98692.htm

前端实现图片懒加载(lazyload)的两种方式

： https://www.cnblogs.com/liliangel/p/6122836.html

js实现图片懒加载：https://www.jianshu.com/p/4f6ea540516a