IntersectionObserver 实现图片懒加载

背景

最近使用express做导航类型网站，因为这个是后端jade渲染，浏览器拿到页面之后，解析出来dom结构，导致100+的图片瞬间加载，严重浪费了宽带资源，加重服务器负担，因此打算延迟加载图片

模板引擎

当前使用jade

有人可能好奇，为什么在客服端浏览器，动态加载dom节点，但是这样的话，SEO不太好

解决方案

offset

通过监听需要懒加载的，第一个可以滚动的父容器，判断是不是在视图内，这个是一个解决方式，但是比较复杂，而且性能不好

IntersectionObserver

浏览器原生提供的能力，性能好，代码简单

jade 模板 增加lazy属性（按实际情况来）

block content
  .container
    each block in lists
      .row.cell-wrap
        p.cell-title=block.text
        each item in block.children
          a(href=`${item.link}` target='_blank')
            .col-xs-6.col-sm-4.col-md-3.cell-item
              .img
                img(lazy=`${item.image}` alt=`${item.title}`)
              .content
                =item.title
                p.desc=item.desc

浏览器端js配套监听

const intersectionObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(item => {
        const { intersectionRatio, target } = item
        // `intersectionRatio`为目标元素的可见比例，大于`0`代表可见
        if (intersectionRatio) {
            // 解除监听
            observer.unobserve(target);
            // 赋值src，开始加载图片
            target.src = target.getAttribute('lazy');
        }
    });
});
// 获取所有需要监听的元素并监听
document.querySelectorAll('img[lazy]').forEach((el) => intersectionObserver.observe(el))