vue3 이미지 지연 로딩 IntersectionObserver 및 useIntersectionObserver를 사용하는 방법

1. src 아래에 helloworld.js를 생성합니다.

// 随便导入一张图片作为加载出错时的默认图片
import defaultImg from '@/assets/logo.svg'

import {useIntersectionObserver} from "@vueuse/core"; //图片加载失败时候用的图片
export default {
    install (app) {
        defineDirective(app)//自定义指令
    }
}

// 自定义指令
const defineDirective = (app) => {
    // 1．图片懒加载指令v-lazyLoad
// 原理:先存储图片地址不能在src上，当图片进入可视区，将你存储图片地址设置给图片元素（dom）的src即可。
    app.directive('lazyLoad', {
        // vue2.0监听使用指令的DOM是否创建好，钩子函数: inserted
        // vue3.0 的指令拥有的钩子函数和组件的一样，使用指令的DON是否创建好，钩子函数: mounted,onMounted是在组合API时候使用，现在是选项
        mounted (el, binding) { // 绑定的元素，绑定的值
            // // 2.创建一个观察对象，来观察当前使用指令得元素

            const observe = new IntersectionObserver(([{isIntersecting}]) => {
                if (isIntersecting) { // 如果进入了可视区
                    // 谁进入了可视区？得用observe去观察 是哪个元素使用了该指令，所以会传入dom对象el
                    // 停止观察，因为观察一次就够了
                    observe.unobserve(el)
                    // console.log(binding.value, el) // binding.value就是绑定的地址
                    // 3.监听图片加载失败，用默认图
                    el.onerror = () => {
                        el.src = defaultImg
                    }
                    // 4.将指令v-lazyLoad上的地址设置给el的src属性
                    el.src = binding.value
                }
            }, {
                threshold: 0//进入到可视区交界就开始观察
            })
            observe.observe(el)// 使用observe上的observe方法观察这个dom元素
        }
            // const { stop } = useIntersectionObserver(
            //     // 监听目标元素
            //     el,
            //     ([{ isIntersecting }], observerElement) => {
            //         if (isIntersecting) {
            //             // 当图片url无效加载失败的时候使用默认图片替代
            //             el.onerror = function () {
            //                 el.src = defaultImg
            //             }
            //             console.log('加载')
            //             el.src = binding.value
            //             stop()
            //         }
            //     })
            // }
    })
}

위 코드에서 아래 마운트된 방법은 플러그인을 사용할 필요가 없으며 아무것도 설치할 필요가 없습니다.

const observe = new IntersectionObserver(([{isIntersecting}]) => {
        if (isIntersecting) { // 如果进入了可视区
            // 谁进入了可视区？得用observe去观察 是哪个元素使用了该指令，所以会传入dom对象el
            // 停止观察，因为观察一次就够了
            observe.unobserve(el)
            // console.log(binding.value, el) // binding.value就是绑定的地址
            // 3.监听图片加载失败，用默认图
            el.onerror = () => {
                el.src = defaultImg
            }
            // 4.将指令v-lazyLoad上的地址设置给el的src属性
            el.src = binding.value
        }
    }, {
        threshold: 0//进入到可视区交界就开始观察
    })
    observe.observe(el)// 使用observe上的observe方法观察这个dom元素
}

mounted 아래에 설명이 있는 방법은 플러그인 설치가 필요합니다. 튜토리얼에 들어가려면 클릭하세요

// const { stop } = useIntersectionObserver(
//     // 监听目标元素
//     el,
//     ([{ isIntersecting }], observerElement) => {
//         if (isIntersecting) {
//             // 当图片url无效加载失败的时候使用默认图片替代
//             el.onerror = function () {
//                 el.src = defaultImg
//             }
//             console.log('加载')
//             el.src = binding.value
//             stop()
//         }
//     })
// }

2. 앱에서 가져와서 사용하세요. 다음과 같이 확인하세요:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/reset.css'
import Vant from 'vant'
import 'vant/lib/index.css';
// 导入自己UI组件库
import UI from './helloworld'

// 插件的使用，在main.js使用app.use(插件)
createApp(App).use(Vant).use(UI).mount('#app')
// 具体就是导入这个
// import UI from './helloworld'
// 再use(UI)

위 내용은 vue3 이미지 지연 로딩 IntersectionObserver 및 useIntersectionObserver를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!