v-lazy自定义懒加载指令

最新推荐文章于 2024-04-20 08:51:32 发布

我要疯狂做项目

最新推荐文章于 2024-04-20 08:51:32 发布

阅读量404

点赞数 6

文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_45478649/article/details/136382779

版权

定义

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.directive('lazy', {
    mounted(el, binding) {
        let observer = new IntersectionObserver((entries) => {
          console.log("entries", entries); // 这个是IntersectionObserver对img标签观测之后的一个对象。
          // 遍历
          for (let i of entries) {
            // 如果改元素处于可视区
            if (i.isIntersecting) {
              // 获取该元素
              let img = i.target;
              // 重新设置src值,为了可以方便观看
              setTimeout(() => {
                img.src = binding.value;
              }, 500);
              //取消对该元素的观察
              observer.unobserve(img);
            }
          }
        });
            // 为 img 标签添加一个观察
            observer.observe(el);
    }
})
app.mount("#app");

使用

<template>
  <div>
    <div class="root">
      <p class="notice">向下滚动</p>
      <div class="target">
        <ul>
          <li v-for="item in urls" :key="item">
            <img src="https://img1.baidu.com/it/u=1715269354,1772233128&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" v-lazy="item" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const urls = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
];
</script>
 
<style scoped>
.root {
  border: 2px dashed #ccc;
  height: 400px;
  margin: 2rem 1rem;
  overflow-y: scroll;
  width: 700px;
}

.target {
  border: 2px dashed #ccc;
  padding: 10px;
}

img {
  height: 100px;
}
</style>