Widget:Lazyload

<script type="text/javascript"> // lazy load image // example: $(document).ready(function () {

   var eles = document.querySelectorAll(".img-lazy"); // 获取所有列表元素
   // 监听回调
   var lazycallback = function (entries) {
       entries.forEach(function (item) {
           // 出现到可视区
           if (item.intersectionRatio > 0) {
               var ele = item.target;
               var imgSrc = ele.getAttribute("alt");
               if (imgSrc) {
                   // 预加载
                   var img = new Image();
                   img.addEventListener(
                       "load",
                       function () {
                           ele.src = imgSrc;
                           ele.width = img.naturalWidth;
                           ele.height = img.naturalHeight;
                       },
                       false
                   );
                   img.src = imgSrc;
                   // 加载过清空路径，避免重复加载
                   ele.removeAttribute("alt");
               }
               // 图片加载完成后，取消观察该元素
               observer.unobserve(ele);
           }
       });
   };
   var observer = new IntersectionObserver(lazycallback);

   // 列表元素加入监听
   eles.forEach(function (item) {
       observer.observe(item);
   });

}); </script>