图片懒加载（延迟加载）原理及实现
Posted Rella
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片懒加载（延迟加载）原理及实现相关的知识，希望对你有一定的参考价值。
作为一个小前端，还有很多概念或者是技术我们不清楚，那么，我们能做的就是多多实践，最佳实践就是去看看那些流量大的网站怎么做的啦~哈哈
经常听别个说懒加载、懒加载，作为一名有上进心的程序媛，上网扒了拔，轻松get到概念了，废话不多说，进入正题：
为了减少流量，提升网站性能，图片展示型网站会采用懒加载。一般第一屏的图片直接显示，从第二屏开始采用懒加载。
通常的做法是在对<img>标签的src属性放占位图片的地址，而真实的图片地址放在img标签的某个属性中，如data-img或original之类的。
就像这样：<img data-img="真实地址" src="占位图片地址" >
鼠标滚动时判断待加载资源到可视区域顶端的距离，如小于屏幕高度，把data-img的值赋给src，然后去掉data-img属性。
路漫漫其修远兮，我将上下而求索~写代码不能马虎啊
以上是关于图片懒加载（延迟加载）原理及实现的主要内容，如果未能解决你的问题，请参考以下文章