懒加载其实就是延迟加载，是一种对网页性能优化的方式。当访问一个页面时，不再一次性加载全部图片资源，而是优先加载处在可视区域的图片。当需要显示的时候在发送图片请求。避免打开网页时加载过多资源。

图片流形式，页面一次性载入很多图片的时候

在HTML的图片img标签中src属性（表示图片的URL），不为空，浏览器会根据这个值发送请求。若为空，则不会发送请求。所以，可先不设置该src值，将其真正的url放在另一个属性data-src中，在需要的时候，也就是图片进入可视区域后，将url取出并给src赋值。

• 方法一 利用 getBoundingClientRect() 如demo1 监听到scroll事件后，调用目标元素的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。
• 方法二
• 方法三

• 跨浏览器获得可视区域高度