图片懒加载的实现

图片懒加载适用场景: 多为一些电商产品, 多屏图片展示页面。
如果我们不进行懒加载会出现以下几个问题:

1. 浪费带宽, 加载过多的无效资源, 因为不是所有用户都会查看。
2. 并发资源加载过多会造成JS的堵塞。

1. 把img标签的src属性指向一个本地占位符图片
2. 然后定义一个自定义属性data-src来引用真正的图片资源地址(图片需要指定宽高)

3. 当载入初始化页面时候监听scroll事件, 滚动时候当图片进入可视化区域就修改src指向为data-src地址

  
    
    
    
    
    
      * {
 margin: 0;
 padding: 0;
      }
      img {
 display: block;
 margin-bottom: 50px;
 width: 400px;
 height: 400px;
      }