document引用图片的src属性能干嘛_如何实现图片懒加载

背景

图片懒加载是针对图片加载时机的一种优化，在一些图片量比较大的网站（比如电商网站首页，或者团购网站、小游戏首页等），如果我们尝试在用户打开页面的时候，就把所有的图片资源加载完毕，那么很可能会造成白屏、卡顿等现象，因为图片真的太多了，一口气处理这么多任务，浏览器做不到啊！

懒加载是为了让浏览器只加载可视区内的图片，可视区外的大量图片不进行加载，当页面滚动到后面去的时候再进行加载。这样做有很多好处可以增加首屏加载的速度，毕竟，用户点开页面的瞬间，呈现给他的只是首屏，我们只要把首屏的资源图片加载处理就可以了，至于下面的图片，当用户下滑当当前位置的时候，在加载出来也是没问题的，对于性能压力也小了，用户体验也没有变差。

解答

图片懒加载的原理就是需要知道图片是否在可视区内了，当图片到达可视区内就需要去请求对应的图片加载出来

页面中的img标签一般如下写

<img class="lazyload" src="placeholder.jpg" data-src="real_image.jpg" />

其中src首先赋值一个占位的图片，一般是一个很小的图片，进行占位，src是实际需要展示的图片，原理就是当图片在可视区内的时候将src的图片选渲染出来即可。

1、原生实现

Chrome 76 将原生支持图片的惰性加载，支持对img和ifr