我的回答

  1. 占位符用于占位, 触发后资源加载完成进替换
  2. 等到需要加载资源的时候才开始加载资源(触发方式可以是异步加载成功—组件或者滚动到指定位置—图片)
  3. 防止一开始加载资源过多, 造成阻塞或者卡顿, 以及避免不必要的资源加载

    参考回答

    什么叫做懒加载?

    懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚下到那个到目标之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。适用于图片很多，页面很长的电商网站场景中。

    为什么要用懒加载?

    能提升用户的体检。不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验 减少无效资源的加载，这样能明显减少服务器的压力和流量，也能够减少浏览器的负担 防止并发加载的资源过多会阻塞 js 的加载，影响网站的正常使用。

    懒加载的原理

    首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在 data-original 属性中，当页面滚动的时候需要去监听 scroll 事件，在 scroll 事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区域就将鱼片的 src 属性设置为 data-original 的值，这样就可以实现延迟加载

懒加载实现步骤

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <title>Lazyload</title>
  5.     <style>
  6.       .image-item {
  7.         display: block;
  8.         margin-bottom: 50px;
  9.         /* 一定记得设置图片高度 */
  10.         height: 200px;
  11.       }
  12.     </style>
  13.   </head>
  15.   <body>
  16.     <img
  17.       src=""
  18.       class="image-item"
  19.       lazyload="true"
  20.       data-original="images/1.png"
  21.     />
  22.     <img
  23.       src=""
  24.       class="image-item"
  25.       lazyload="true"
  26.       data-original="images/2.png"
  27.     />
  28.     <img
  29.       src=""
  30.       class="image-item"
  31.       lazyload="true"
  32.       data-original="images/3.png"
  33.     />
  34.     <img
  35.       src=""
  36.       class="image-item"
  37.       lazyload="true"
  38.       data-original="images/4.png"
  39.     />
  40.     <img
  41.       src=""
  42.       class="image-item"
  43.       lazyload="true"
  44.       data-original="images/5.png"
  45.     />
  46.     <img
  47.       src=""
  48.       class="image-item"
  49.       lazyload="true"
  50.       data-original="images/6.png"
  51.     />
  52.     <img
  53.       src=""
  54.       class="image-item"
  55.       lazyload="true"
  56.       data-original="images/7.png"
  57.     />
  58.     <img
  59.       src=""
  60.       class="image-item"
  61.       lazyload="true"
  62.       data-original="images/8.png"
  63.     />
  64.     <img
  65.       src=""
  66.       class="image-item"
  67.       lazyload="true"
  68.       data-original="images/9.png"
  69.     />
  70.     <img
  71.       src=""
  72.       class="image-item"
  73.       lazyload="true"
  74.       data-original="images/10.png"
  75.     />
  76.     <img
  77.       src=""
  78.       class="image-item"
  79.       lazyload="true"
  80.       data-original="images/11.png"
  81.     />
  82.     <img
  83.       src=""
  84.       class="image-item"
  85.       lazyload="true"
  86.       data-original="images/12.png"
  87.     />
  88.     <script>
  89.       var viewHeight = document.documentElement.clientHeight; //获取可视区高度
  90.       function lazyload() {
  91.         var eles = document.querySelectorAll("img[data-original][lazyload]");
  92.         Array.prototype.forEach.call(eles, function (item, index) {
  93.           var rect;
  94.           if (item.dataset.original === "") return;
  95.           rect = item.getBoundingClientRect(); // 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
  96.           if (rect.bottom >= 0 && rect.top < viewHeight) {
  97.             (function () {
  98.               var img = new Image();
  99.               img.src = item.dataset.original;
  100.               img.onload = function () {
  101.                 item.src = img.src;
  102.               };
  103.               item.removeAttribute("data-original"); //移除属性，下次不再遍历
  104.               item.removeAttribute("lazyload");
  105.             })();
  106.           }
  107.         });
  108.       }
  109.       lazyload(); //刚开始还没滚动屏幕时，要先触发一次函数，初始化首页的页面图片
  110.       document.addEventListener("scroll", lazyload);
  111.     </script>
  112.   </body>
  113. </html>