图片懒加载JavaScript前端优化

图片懒加载的玩法，算是前端优化里比较常见也比较实用的了。它的核心思路简单：不急着加载不在屏幕上的图，等你快滚到它那儿了再说。这样做的好处挺，加载更快，用户等得也少，尤其是图多的时候，效果更。

用HTML5搞定图片懒加载，一般会用到data-src这个属性。也就是说，图片一开始只显示一个占位图，等该它露脸了，再把data-src里的地址塞进src里，图片这才真正加载。像loader.gif这种占位图，就挺有用的，用户一看就知道图片在加载中。

lazy.html通常就是放图片的地方，结构是这样的：

而lazy.js则负责监控滚动事件，判断图片有没有进入视口，如果进来了，就加载它。这段代码就蛮常见：

document.addEventListener('DOMContentLoaded', function() {
  var lazyImages = Array.from(document.querySelectorAll('.lazy'));

function isInViewport(img) {
    var rect = img.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    );
  }
function lazyLoad() {
    lazyImages.forEach(function(img) {
      if (isInViewport(img)) {
        img.src = img.getAttribute('data-src');
        img.classList.remove('lazy');
        lazyImages = lazyImages.filter(function(imgEl) {
          return imgEl !== img;
        });
      }
    });
  }
window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
  lazyLoad();
});

啦，如果你想偷懒点，也可以试试IntersectionObserver，API 更现代，效率也更高。

如果你正好在做图多的页面，比如电商、图库之类的，不妨上个懒加载，体验感会好不少。