图片懒加载

图片懒加载是前端性能优化的常见方案，核心思想就是控制视口外的图片进入视口时候再进行加载，从而提升页面初始化渲染性能和用户体验。现分享一个图片懒加载的实现方法

图片懒加载插件 https://github.com/ApoorvSaxena/lozad.js 

<script src="/assets/js/plug/lazyload.js"></script>
<script>
  var observer = lozad('.lozad', {
    rootMargin: '10px 0px', // syntax similar to that of CSS Margin
    threshold: 0.1, // ratio of element convergence
    enableAutoReload: true // it will reload the new image when validating attributes changes
  });
  observer.observe();
  window.onload = function () {
    var element = document.getElementsByClassName("lozad");
    for (var i = 0; i < element.length; i++) {
      if (!element[i].attributes["data-loaded"]) {
        observer.observe();
      }
    }
  }
</script>

图片引入：

<picture>
<source class="lozad" type="image/webp" srcset="xxx">
<img class="lozad" data-src="xxx"
alt="email_monitor_cover">
</picture>