关于前端:实现图片懒加载

懒加载是针对图片加载机会的优化，在一些大量应用图片的网站，如果在首屏加载全副的资源会呈现首屏白屏的景象，所以当初有一系列的操作来实现首屏优化，路由懒加载，图片懒加载。

懒加载实现目标
懒加载 的目标是当页面的图片进入到用户的可是范畴之内再加载图片的一种优化形式。

能够层架首屏的加载速度，当用户关上页面的霎时，出现进去的只是首屏，只须要把首屏的资源图片加载进去就能够了，至于没有呈现再可是区域的图片就能够临时不必加载，只有当呈现在用户的可视范畴的时候再加载，这样对于性能的压力也小，能够进步用户体验。

实现
在页面初始化的时候，
<img>图片的 src 实际上是放在 data-src 属性上的，当元素处于可视范畴内的时候，就把 data-src 赋值给 src 属性，实现图片加载。

// 在一开始加载的时候
<img data-src="http://xx.com/xx.png" src="" />
// 在进入可视范畴内时
<img data-src="http://xx.com/xx.png" src="http://xx.com/xx.png" />

<div> 应用背景图来实现，原理也是一样的，把 background-image 放在，在可视范畴时，就把 data-src 赋值给 src 属性，实现图片加载。

// 在一开始加载的时候
<div
  data-src="http://xx.com/xx.png"
  style="background-image: none;background-size: cover;"
></div>

// 在进入可视范畴内时
<div
  data-src="http://xx.com/xx.png"
  style="background-image: url(http://xx.com/xx.png);background-size: cover;"
></div>

实现一个懒加载
基于下面的原理来实现一个图片懒加载