Vue图片懒加载指令
首页 > >    作者:lininn   2020年8月7日 9:25 星期五   热度:455°   百度已收录  
时间:2020-8-7 9:25   热度:455° 


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,   },






二维码加载中...
本文作者:lininn      文章标题: Vue图片懒加载指令
本文地址:?post=466
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn