vue3组合式api实现v-lazy图片懒加载的方法实例

目录
  • 前置知识
    • Intersection Observer
    • Vue3指令周期
    • image对象
  • 思路
  • 完整代码
  • 总结

前置知识

Intersection Observer

浏览器提供api，用于检测目标元素和祖先元素/顶级文档视窗 (viewport) 交叉状态的方法。

    const observer = new IntersectionObserver(function (IntersectionObserverEntry) {},options);
    observer.observe(el);

构造函数接收一个回调函数，一个配置对象（可选），返回一个观察器实例。实例的observe方法接收一个dom节点作为观察的对象
当目标对象出现在视口的时候，会调用回调函数，传递一个元素都为IntersectionObserverEntry对象的数组。

IntersectionObserverEntry对象有以下属性 (只列举了这篇用到的两个）：

  • target：被观察的目标元素，是一个 DOM 节点对象
  • intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0

Vue3指令周期

  • created：在绑定元素的 attribute 或事件监听器被应用之前调用；
  • beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
  • mounted：在绑定元素的父组件被挂载后调用；
  • beforeUpdate：在更新包含组件的 VNode 之前调用；
  • updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
  • beforeUnmount：在卸载绑定元素的父组件之前调用；
  • unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

image对象

Image 对象代表嵌入的图像。

  • onload 当图像装载完毕时调用的回调函数。

思路

想要的效果 在有多个图片加载的时候 只要在最外面的wrapper上用一次v-lazy就可以

每张图片的src先用加载gif替换掉，然后再放到文档碎片里面，等到用户滑动到视口了再挂载上图片元素，之前一直使用加载的gif占位，等图片加载完成再替换。

 首先vue3的指令跟组件类似也有生命周期，created的时候指令绑定的dom元素还没有attribute，也没有DOM结构，所以不适合，mounted整个DOM元素已经挂载到页面上了，图片在挂载上去的时候就开始加载，再做懒加载已经没有意义了，所以使用beforeMount，有完整的DOM结构，但是没有挂载到页面上。

完整代码

export const lazyLoad = {
  beforeMount(el: any, binding: any, vnode: any, prevVnode: any) {
    const img = el.querySelector(`.${el.className} img`);
    const src = img.getAttribute("src");
    // 图片使用loading gif替换
    img.setAttribute("src", "https://m.tea7.com/images/imgLoading.gif");
    // 新建Image对象
    const tempImg = new Image();
    tempImg.onload = function () {
      img.setAttribute("src", src);
    };
    const parent = img.parentNode;
    const observer = new IntersectionObserver(function (changes) {
      // 可视
      changes.forEach((item) => {
        if (item.intersectionRatio !== 0) {
          tempImg.src = src;
        }
      });
    });
    observer.observe(el);
  },
};

参考链接：

IntersectionObserver API 使用教程

总结

到此这篇关于vue3组合式api实现v-lazy图片懒加载的文章就介绍到这了,更多相关vue3实现v-lazy图片懒加载内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue组合式API浅显入门示例详解

    目录 正文 组合式API setup 变量声明 目前比起选项式API的优点 生命周期 正文 在react推出了hook之后,vue也在vue3里面添加了组合式API,鉴于这个时间间隔,我有理由认为组合式api和hook还是有一些关系的.不过在我具体的使用中,我并没发现这两个方法太多的相同点,不过鉴于vue自动发布之后就与react之间那剪不断理还乱的量子力学关系,估计会有很多人会问及这俩之间的异同.我还没到能分辨出异同的地步,就简单的介绍一下vue的组合式API吧. 组合式API 在vue3.0

  • Vue组合式API--setup中定义响应式数据的示例详解

    目录 一.Options API(选项式API)的弊端 1.1 什么是选项式API 1.2 选项式API的弊端 二.Composition API(组合式API)概述 2.1 Composition API的作用 2.2 Composition API的编码位置 三.setup函数的参数和返回值 3.1 setup函数的参数 3.2 setup函数的返回值 四.setup中如何定义响应式数据 4.1 reactive函数 4.2 ref函数 4.3 关于如何选择reactive函数和ref函数

  • vue  composition-api 封装组合式函数的操作方法

    目录 介绍 最佳实践 1. options对象化 2. 动态返回 3. 灵活地使用ref 4. 异步变同步 5. 简单的状态管理 参考资料 介绍 在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数. 组合式函数 | Vue.js 组合式 API 常见问答 | Vue.js Composables 函数就是利用 Vue3 提出的 Composition API ,封装出的一些可以复用的组合式函数,目前 Vue2 也

  • vue3-组合式api-provide/inject详解

    目录 一.父组件 二.子组件 三.孙组件 四.运行项目界面效果如下 Vue3:组合式API-依赖注入(provide().inject()) 1.provide() 2.inject() provide/inject 适用于跨级通信,例如在父组件中改变值,在孙组件中通过依赖注入的方式能获取到父组件中改变的这个值 一.父组件 <template> <div> <!-- 子组件 --> <son></son> <button @click=&q

  • 一文详解Vue选项式 API 的生命周期选项和组合式API

    目录 Vue2.Vue3 生命周期的变化 选项式 API 的生命周期选项的变化 小知识 组合式 生命周期选项 API VNode 生命周期事件 Vue2x Vue3x Vue2.Vue3 生命周期的变化 正好在看Vue的官方文档,也正好比对一下,做一下笔记 选项式 API 的生命周期选项的变化 Vue2.x Vue3 beforeCreate beforeCreate created created beforeMount beforeMount mounted mounted beforeUp

  • vue实现图片懒加载的方法分析

    本文实例讲述了vue实现图片懒加载的方法.分享给大家供大家参考,具体如下: vue图片懒加载使用 首先第一步,安装插件 vue-lazyload npm install vue-lazyload --save-dev 在man.js中引入插件 import VueLazyLoad from 'vue-lazyload' 使用 Vue.use(VueLazyLoad,{ error:'', //加载失败的图 loading:'' //加载中的默认图 }) 这是一个最简单的配置 官方的详细扩展配置文

  • JavaScript实现图片懒加载的方法分析

    本文实例讲述了JavaScript实现图片懒加载的方法.分享给大家供大家参考,具体如下: 懒加载是非常实用的提升网页性能的方式,当访问一个页面的时候,只显示可视区域内的图片,其它的图片只有出现在可视区域内的时候才会被请求加载. 我们现在用原生的js实现简单的图片懒加载,主要利用的原理就是先不给设置src,而是把图片的路径放在data-src中,等待图片被加载的时候将路径取出放到src中. HTML代码 <div class="container"> <div clas

  • 详解JavaScript两个实用的图片懒加载优化方法

    详解JavaScript两个实用的图片懒加载优化方法

    目录 一.方法一 二.方法二 InterSectionObserver 一.方法一 重点: 1.getBoundingClientRect().top > window.innerHeight 图片未出现 2.getBoundingClientRect().top < window.innerHeight 图片出现了 HTML: <ul> ...... <li>2222222222</li> <li>2222222222</li> &

  • vue3+typescript实现图片懒加载插件

    github项目地址: github.com/murongg/vue- 求star 与 issues 我文采不好,可能写的文章不咋样,有什么问题可以在留言区评论,我会尽力解答 本项目已经发布到npm 安装: $ npm i vue3-lazyload # or $ yarn add vue3-lazyload 需求分析 支持自定义 loading 图片,图片加载状态时使用此图片 支持自定义 error 图片,图片加载失败后使用此图片 支持 lifecycle hooks,类似于 vue 的生命周

  • JS图片懒加载库VueLazyLoad详解

    目录 背景 说明 实现原理 1. placeholder 的实现很细致和灵活 2. 添加图片缓存 3. 事件监听使用节流 4. 监听事件不止滚动事件 5. 事件列队的方式来处理懒加载 6. 支持 data-srcset 7. 自定义控制可视区的判定范围 待完善 1. 没有解决布局抖动 2. 跳过已经加载图片的判断方式 3. 局部懒加载 4. 性能不是很好 5. observer 模式配置简单 6. SEO 不友好 总结 背景 上篇<图片懒加载原理方案详解>中详细解析了图片懒加载的原理和方案.主

  • 浅谈vue中使用图片懒加载vue-lazyload插件详细指南

    在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:

  • js前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien

  • 图片懒加载插件实例分享（含解析）

    在面试的时候有面试官问我,懒加载这个插件你有没有想到如何去优化?又间接问我函数节流的问题,嘿嘿,今天就更新下这个插件,顺便应用下函数节流(throttle),先直接上下代码,含解析 /* * 函数功能:函数节流 * fn 需要调用的函数 * delay 函数需要延迟处理的时间 * mustRunDelay 超过该时间,函数一定会执行 * */ var throttle = function (fn, delay, mustRunDelay) { var timer; //使用闭包存储timer

  • 深入研究jQuery图片懒加载 lazyload.js使用方法

    深入研究jQuery图片懒加载 lazyload.js使用方法

    lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置. 跟bootstrap一样,lazyload.js也是依赖于jQuery <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/jquery.lazyload.min

  • IntersectionObserver实现图片懒加载的示例

    IntersectionObserver实现图片懒加载的示例

    API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 直接上源码: <!DOCTYPE html> <html> <header> <style> .list-item{ height: 400px; margin: 5px; background-color: lightblue; list-style: none; } </style>

随机推荐