Vue图片懒加载指令 Vue图片懒加载指令

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






分享本文至:

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论