<template>
<div>
<div class="div-box">
<img
v-lazy="item"
:src="item"
v-for="item in arr"
:key="item"
alt=""
width="360"
height="500"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import type { Directive } from "vue";
import { entries } from "lodash";
// glob 是懒加的模式
// globEager 静态加载
let imageList = import.meta.globEager("./assets/images/*.*");
let imageList2: Record<
string,
{ default: string }
> = import.meta.glob("./assets/images/*.*", { eager: true });
let arr = Object.values(imageList2).map((v) => v.default);
console.log(imageList, arr, "imageList");
let vLazy: Directive<HTMLImageElement, string> = async (el, binding) => {
console.log(el, "el");
const def = await import("./assets/vue.svg");
el.src = def.default;
const observe = new IntersectionObserver((entries) => {
console.log(entries, binding.value);
if (entries[0].intersectionRatio > 0) {
setTimeout(() => {
el.src = binding.value;
}, 500);
observe.unobserve(el);
}
});
observe.observe(el);
};
</script>
<style>
.div-box {
overflow: scroll;
height: 100vh;
}
</style>
vue3+ts 图片懒加载
最新推荐文章于 2024-06-27 17:51:05 发布