前端性能优化之IntersectionObserver图片懒加载

IntersectionObserver

1.使用IntersectionObserver可取代传统onscorll模式做图片懒加载，onscorll模式不停地监听页面滚动，造成页面开销过大。

2.代码简洁性，可维护性更强

3.注意IntersectionObserver的兼容性问题。（IE不兼容！！！）

兼容性如下：

如有不符合兼容性要求的，还是使用传统scroll模式吧

使用方式： ①：新建lazyLoadImg.js文件

import defaultImage from '@/assets/加载中.jpeg'

const lazyLoadImage = () => {
  return {
    bind(el, binding) {
      el.setAttribute("data-src", el.getAttribute("src"))
      el.setAttribute("src", defaultImage)
      let observer = new IntersectionObserver(entries => {
        entries.forEach(item => {
          if (item.isIntersecting) {
            console.log('已经显示在可视窗口了===i.isIntersecting',i.isIntersecting)
            el.setAttribute('src', el.getAttribute("data-src"))
            observer.unobserve(el)
          }
        })
      })
      observer.observe(el)
    }
  }
}

const install = {
  install(vue, defaultImage) {
    //指令名：v-lazy
    vue.directive("lazy", lazyLoadImage());
  },
};

export default install;

②main.js注册自定义指令

// 引入图片懒加载
import LazyloadImg from "./components/utils/lazyLoadImg";

Vue.use(LazyloadImg);

使用时在img标签添加v-lazy即可实现图片懒加载（不影响首屏图片，且图片要有高度）