Vue图片懒加载

安装 vueuse 插件

npm i @vueuse/core

搜索 useIntersectionObserver 方法
javascript 复制代码
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
 
export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)
 
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )
 
    return {
      target,
      targetIsVisible,
    }
  },
}
使用:
main.js:
1、引入方法
javascript 复制代码
// 用来图片懒加载
import { useIntersectionObserver } from "@vueuse/core";
2、提前配置好 自定义指令
javascript 复制代码
// 全局指令
app.directive("img-lazy", {
  mounted(el, binding) {
    console.log(el, binding.value);
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }], observerElement) => {
        console.log(isIntersecting);
        if (isIntersecting) {
          el.src = binding.value;
          stop()     //避免性能浪费,视口可见后不再监听
        }
      }
    );
  },
});
html部分:
javascript 复制代码
 <li v-for="item in list" :key="item.id">
	<RouterLink to="/">
		<img alt="" v-img-lazy="item.picture" />
        <p class="name">{{ item.name }}</p>
        <p class="price">&yen;{{ item.price }}</p>
	</RouterLink>
</li>
相关推荐
yngsqq18 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk20 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan22 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE26 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年28 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能38 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房38 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
轻语呢喃40 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂43 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7743 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor