图片懒加载，带CSS样式以及思路解析

 <style>

    /*

    图片懒加载思路

      + 最开始加载页面，img的src不赋值(这样就不会去加载图片),把真实图片的地址赋值给img的自定义属性，方便后期想要加载真实图片时候获取  

      + 如果src不赋值或者加载的图片是错误的，会显示‘碎图’，这样样式不美观，所以；我们最开始让img是隐藏的 可以设置display 也可以设置透明度为0(透明度改变也可以设置过渡效果)

      + 给图片所在的盒子设置北京占位图（或者背景颜色），在真实图片没有加载前进行占位，盒子的宽高是提前设置好

    ----------------

    什么时候加载

    + 当页面第一次渲染完 其他资源加载完成，例如window.onload;

    + 把出现在当前可视窗口的图片进行加载

    ----------

    如何加载

    + 获取图片的自定义属性值，拿到真实图片地址

    + 给图片的src赋值真实地址：如果图片可以正常加载成功，则让img显示

    */

    html,

    body {

      height: 500%;

    }

    .pic-box {

      box-sizing: border-box;

      position: absolute;

      top: 1000px;

      left: 100px;

      width: 600px;<