图片懒加载的两种方式

方式一：事件监听

  
    
    
    
    
  
  
  
    asada
    
    
    
    ·
    
    
    
  

方式二：IntersectionObserverSHI

    const callback = (entires) => {
      entires.forEach((entry) => {
        if (entry.isIntersecting) {
          const image = entry.target;
          const data_src = image.getAttribute("data-src");
          image.setAttribute("src", data_src);
          observer.unobserve(image);
          console.log("触发");
        }
      });
    };
    const images = document.querySelectorAll("img");
    const observer = new IntersectionObserver(callback);
    images.forEach((image) => {
      observer.observe(image);
    })

 实例演示：使用vue-lazyload step1：安装vue-lazyload

npm i vue-lazyload -S

step2:main.js

import Vue from 'vue'
import App from './App.vue'

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  // require必须携带扩展名
  loading: require('./assets/loading.gif'),
 
})

step3:调用