关于数据懒加载问题

Question

目前的方案是数据在页面加载完后全部由后端渲染到前端页面，但是这样速度慢，也容易造成卡顿。用户体验不是很好，目前想使用前端进行懒加载，那么前端如何操作呢？

Answer 1

懒加载可以在需要显示图片的时候，才下载图片，所以可以减少服务器的压力，避免不必要的资源下载，在页面载入的时候将页面上的img标签的src指向一个站位的图片（都是一模一样图片方便缓存）， 把真实地址存放在一个自定义属性中，这里我用data-src来存放，例如：

<img src="loading.gif" data-src="http://xxx.ooo.com&quot; />

然后获取img标签 当图片出现在可视区域的时候（和按需加载判断的方法是一样的） 那么就把真实的src地址给赋值上