vue-lazy(自定义图片懒加载)

自定义图片懒加载

  在npm官网库中试了好多，要么就是不生效没什么用的，要么就是没文档不知道能不能用的，上次在npm找了一个，现在找不到了，被删库了，所以，还是自己简单写一个救救急吧，废话不多说，直接看代码!!!

vue2图片懒加载

1. 创建一个组件image-lazy.vue文件

   <template>
     <img v-lazy="src" alt="" v-error src="" class="lazy-img">
   </template>
   
   <script>
   export default {
     name: "image-lazy",
     props: {
       src: {
         type: String,
         default: ''
       }
     },
     directives: {
       'lazy': {
         bind(el, binding) {
           // 设置loading图片地址: 可自行替换
           el.setAttribute('src', 'http://175.178.164.195:9000/kylin-mall/icon/loading.gif');    // 替换使用你自己的图片
           // 真实图片地址
           el.setAttribute('data-src', binding.value);
           const observer = new IntersectionObserver((entries, observer) => {
             entries.forEach((entry) => {
               // 目标元素进入可视区域
               if (entry.isIntersecting) {
                 // 获取目标元素
                 var img = entry.target;
                 // 将img的src替换成真实图片地址
                 img.src = img.dataset.src;
                 // 结束观察该img元素
                 observer.unobserve(img);
               }
             });
           });
           // 开始观察目标img元素
           observer.observe(el);
         }
       },
       'error': {
         bind(el) {
           el.onerror = () => {
             el.src = 'http://175.178.164.195:9000/kylin-mall/default/default_no_picture.png';  // 替换使用你自己的图片
           }
         }
       }
     }
   }
   </script>
   
   <style scoped>
   .lazy-img{
     background: hsl(0, 0%, 90%);
   }
   </style>
   

   

2. 在main.js文件中全局引用

import Vue from 'vue';
import LazyImg from "@/components/image-lazy/image-lazy.vue";  // 封装的懒加载图片组件

Vue.component('image-lazy', LazyImg)

3. 使用

<image-lazy class="image-box" :src="你的图片链接" />

4. 效果图
   

vue3图片懒加载

1. 创建image-lazy.js或image-lazy.ts文件

   // vue图片懒加载指令对象
   export const imgLazy = {
       mounted(el: any, binding: any) {
           // 设置loading图片地址: 可自行替换
           el.setAttribute('src', 'http://175.178.164.195:9000/kylin-mall/icon/loading.gif');
           // 真实图片地址
           el.setAttribute('data-src', binding.value);
           const observer = new IntersectionObserver((entries, observer) => {
               entries.forEach((entry) => {
                   // 目标元素进入可视区域
                   if (entry.isIntersecting) {
                       // 获取目标元素
                       var img = entry.target;
                       // 将img的src替换成真实图片地址
                       img.src = img.dataset.src;
                       // 结束观察该img元素
                       observer.unobserve(img);
                   }
               });
           });
           // 开始观察目标img元素
           observer.observe(el);
       }
   }
   
   // 裂图处理指令
   export const imgError = {
       mounted(el: any) {
           el.onerror = () => {
               el.src = 'http://175.178.164.195:9000/kylin-mall/default/default_no_picture.png';
           }
       }
   }
   
   

   
2. 在main.js文件中全局注册

import {createApp} from 'vue'  // 引入vue属性
import App from './App.vue'  // 引入App文件
import {imgLazy, imgError} from '@/utils/image-lazy.ts';  // 图片懒加载

const app = createApp(App)
app.directive('lazy', imgLazy)
   .directive('error', imgError)

3. 使用

// 加载图片失败可以自定义路径v-error，不写则默认image-lazy中路径
  <img v-lazy="你的图片链接" class="lazy-img" alt="" v-error="'http://175.178.164.195:9000/kylin-mall/default/default_no_picture.png'">

// 自定义样式
.lazy-img{
  background: hsl(0, 0%, 90%);
  width: 100%;
  height: 100%;
}

4. 效果如上vue2图

代码持续更新，有更好的方法，欢迎各位道友评论区留言探讨！