Vue图片懒加载指令

directive/imgLazy.js

    import baseImg from '@/assets/logo.png' // 创建一个监听器 let observer = new IntersectionObserver((entries)=>{



      // entries是所有被监听对象的集合   entries.forEach(entry =>{

    if(entry.isIntersecting){ 

          // 当被监听元素到临界值且未加载图片时触发。       !entry.target.isLoaded  && showImage(entry.target,entry.target.data_src)

     }
  }) 

    }) function showImage(el,imgSrc){

  const img = new Image();
  img.src = imgSrc;
  img.onload = ()=>{
    el.src = imgSrc;
    el.isLoaded = true;
  } 

    } export default {

  // 这里用inserted和bind都行，因为IntersectionObserver时异步的，以防意外还是用inserted好一点   // inserted和bind的区别在于inserted时元素已经插入页面，能够直接获取到dom元素的位置信息。   inserted(el,binding) { 

        // 初始化时展示默认图片     el.src = baseImg;



        // 将需要加载的图片地址绑定在dom上     el.data_src = binding.value;

     observer.observe(el)
  },
  unbind(){ 

        // 停止监听     observer.disconnect();

   }
}

    





    





    在main.js中使用,注册全局指令




    

        main.js
    




    import imgLazy from '@/directive/imgLazy.js' Vue.directive('imgLazy', imgLazy) 复制代码




    在组件中定义directives使用，给当前组件注册指令



    import imgLazy from '@/directive/imgLazy.js' export default {

  // ...   directives: {
    imgLazy: imgLazy,
  },