实现图片懒加载的两种方法

懒加载及应用场景
懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。
当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。

实现的思路：
给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-src），
监听scroll事件，当图片出现在可视区时，将data-src值赋值给src，加载图片，在图片未加载时，用alt 属性，在图像无法显示时的替代文本

jquery方法的思想也是一样的：
页面中的img元素，若没有src属性，浏览器就不会发出请求去下载图片，只有通过Javascript设置了图片路径，浏览器才会发送请求。

懒加载先在页面中把需要延迟加载的图片统一使用一张占位图进行占位，把真正的路径存在元素data-src属性里。

页面加载完成后，通过scrollTop判断图片是否在用户的视野，如果在，则将 data-src的值取出来存放到src中。

在滚轮事件中重复判断图片是否进入视中，如果在，则将data-url的值取出来存放到src中。