我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解

1、在class="lazy" data-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
// 原理:先存储图片地址不能在class="lazy" data-src上,当图片进入可视区,将你存储图片地址设置给图片元素(dom)的class="lazy" data-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.class="lazy" data-src = defaultImg
                    }
                    // 4.将指令v-lazyLoad上的地址设置给el的class="lazy" data-src属性
                    el.class="lazy" data-src = binding.value
                }
            }, {
                threshold: 0//进入到可视区交界就开始观察
            })
            observe.observe(el)// 使用observe上的observe方法观察这个dom元素
        }
            // const { stop } = useIntersectionObserver(
            //     // 监听目标元素
            //     el,
            //     ([{ isIntersecting }], observerElement) => {
            //         if (isIntersecting) {
            //             // 当图片url无效加载失败的时候使用默认图片替代
            //             el.onerror = function () {
            //                 el.class="lazy" data-src = defaultImg
            //             }
            //             console.log('加载')
            //             el.class="lazy" data-src = binding.value
            //             stop()
            //         }
            //     })
            // }
    })
}

上边的代码中mounted下边这个是一种方式,这种方式不借助插件即不用安装任何东西

const observe = new IntersectionObserver(([{isIntersecting}]) => {
        if (isIntersecting) { // 如果进入了可视区
            // 谁进入了可视区?得用observe去观察 是哪个元素使用了该指令,所以会传入dom对象el
            // 停止观察,因为观察一次就够了
            observe.unobserve(el)
            // console.log(binding.value, el) // binding.value就是绑定的地址
            // 3.监听图片加载失败,用默认图
            el.onerror = () => {
                el.class="lazy" data-src = defaultImg
            }
            // 4.将指令v-lazyLoad上的地址设置给el的class="lazy" data-src属性
            el.class="lazy" data-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.class="lazy" data-src = defaultImg
//             }
//             console.log('加载')
//             el.class="lazy" data-src = binding.value
//             stop()
//         }
//     })
// }

2、在main.js中导入并使用

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)

3、再app.vue中使用如下:

<template>
  <div class="cs"></div>
  <ul >
    <li v-for="item in image_list" :key="item">
<!--      原本的写法-->
      <!-- <img :class="lazy" data-src="item.picture"  alt=""> -->
<!--      // 使用图片懒加载指令-->
      <img v-lazyLoad="item"  alt="">
    </li>
  </ul>
</template>
<script setup>
import {nextTick, onMounted, ref} from "vue";
const image_list = ref([
    'https://yanxuan-item.nosdn.127.net/a6939f41c48fa9e9c8f7a7ed855351f1.jpg',
    'https://yanxuan-item.nosdn.127.net/0cdfd546f8675669b87716114ad5900a.jpg',
    'https://yanxuan-item.nosdn.127.net/240983ccc935146a4795e3990d30468d.jpg',
    'https://yanxuan-item.nosdn.127.net/d46e005025a5d3b73c4781d31b327558.jpg',
    'https://yanxuan-item.nosdn.127.net/330913911087b44b0d817dd78233165f.png',
    'https://yanxuan-item.nosdn.127.net/9d9590bdb4f7cdd874de6a4554abcff9.jpg',
    'https://yanxuan-item.nosdn.127.net/cd9060820a1a52f296fa2502e56a5872.jpg'
])
</script>

<style lang="less" scoped>
.cs{
  height: 1000px;
  background-color: pink;
}
.outer{
  img{
    display: inline-block;
    width: 500px;
  }
}
.inner{
  display: inline-block;
  width: 500px;
  height: 50px;
  background-color: deeppink;
}
</style>

4、效果如下:当拖动右侧滑轮下拉是会发现滚动条变短说明进行了懒加载

到此这篇关于vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver的文章就介绍到这了,更多相关vue3 图片懒加载内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解

这篇文章主要介绍了vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2023-03-19

vue3中使用@vueuse/core中的图片懒加载案例详解

这篇文章主要介绍了vue3中使用@vueuse/core中的图片懒加载案例,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2023-03-19

前端图片懒加载的原理与3种实现方式举例

图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力,下面这篇文章主要给大家介绍了关于前端图片懒加载的原理与3种实现方式的相关资料,需要的朋友可以参考下
2023-03-01

Tensorflow 2.4加载处理图片的三种方式详解

这篇文章主要为大家介绍了Tensorflow 2.4加载处理图片的三种方式详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-21

编程热搜

目录