vue3利用原生使用图片懒加载

已于 2022-04-13 19:00:32 修改
阅读量990 收藏 6
点赞数 1
分类专栏： 青空商城 文章标签： vue.js javascript html5 交互 html
于 2022-04-13 19:00:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61686921/article/details/124147326
版权

开发自己的商城项目时想用上图片懒加载，但是百度了一下vue2的v-lazy在vue3已经被弃用了，因此便搜索vue3有没有类似的api但是并没有发现，因此从网上了解到了IntersectionObserver这样一个浏览器api，并用他实现了图片懒加载

图片懒加载的原理已经是老生常谈了，等到图片组件出现在视口内再加载图片，是一种很常见的优化手段，对于图片是否出现在视口的监听，我们仍然可以使用监听scroll或者使用setInterval来判断实现，但是监听scroll会有触发过于频繁而产生性能问题，监听setInterval因为是给其设定一个间歇执行的函数，与理想效果也会有出入，而IntersectionObserver提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法（这是官方的说法），也就是可以实现监听元素在其祖先元素（默认顶级文档视窗）的可视状态

我们利用Vue3的自定义指

最低0.47元/天 解锁文章
青空W
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3+ElementUI 图片素材管理组件
10-21
1. 图片预览：可以使用ElementUI的`<el-image>`组件，它支持懒加载、预览等功能，适合展示大量图片。 2. 图片上传：可以自定义一个上传组件，利用Vue3的ref和setup语法，监听文件输入事件，然后使用axios等库发送...
整合图片懒加载及百度地图定位与显示
09-20
实现图片懒加载的方法多种多样，可以使用JavaScript库如Lozad.js或LazyLoad，也可以利用HTML5的Intersection Observer API来监听元素是否进入视口，从而触发加载事件。 接下来，我们深入到**百度地图**的**定位与...
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
11-27
在vue中使用图片懒加载详细指南，分享给大家。具体如下： 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo： 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js
Vue3中原生js实现图片懒加载
weixin_55690518的博客
09-16 362
今天我们使用原始js实现图片的懒加载，利用自定义指令以及原生的方法IntersectionObserver 构造函数 来实现图片的懒加载功能 首先，我们先来介绍一下原生的IntersectionObserver 方法 // 创建观察对象实例 new一个实例 const observer = new IntersectionObserver(callback[, options]) const obs = new IntersectionObserver((entries,...
推荐一款高效图片懒加载插件：vue3-lazyload
最新发布
gitblog_00006的博客
06-10 285
推荐一款高效图片懒加载插件：vue3-lazyload 项目地址:https://gitcode.com/murongg/vue3-lazyload 在现代Web应用中，图片加载速度是用户体验的重要因素之一。为了优化性能，我们常常需要引入图片懒加载技术，而vue3-lazyload就是一款专为Vue3打造的高效、轻量级的图片懒加载插件。 项目介绍 vue3-lazyload是一个基于Vue3的无依...
Vue3图片懒加载
frewtyh的博客
05-26 392
1.2引入useIntersectionObserver //响应式监听目标元素的可见性。1.4 在需要懒加载图片的img元素上引用。1.3在main.js注册全局方法。实现图片进入视图窗口加载图片。1.1安装vueuse插件。1.利用vueuse插件。
vue3(vite)实现图片懒加载
m0_57108418的博客
04-28 1767
在src目录下创建lazy文件夹，用于存放懒加载实现的自定义指令，lazy下创建index.js文件。原理：在图片将要展示到可视区域时，将v-lazys的内容交给src属性，使图片得到展示。当不断下滑时，就会有图片进入可视区域，图片就会被放在src标签中进行渲染。在main.js中引入懒加载文件，挂载到app上。在app.vue中放多个图片，查看懒加载是否实现。banding是当前dom对象。
图片懒加载封装自定义全局指令
m0_68331234的博客
07-14 363
背景 电商类网站，图片会非常的多，而如果一上来就加载所有的图片，会导致网页加载很慢。 图片懒加载：等图片正式进入到可视区中时，才加载对应的图片，否则不请求图片 如何知道图片进入或者离开了可视区？ 通过vueuse封装的useIntersectionObserver 写法： 例子： 带入图片： 图片懒加载-封装自定义指令 自己封装指令 v-lazy，实现图片懒加载......
lazyload-img:原生js图片懒加载-利用浏览器的IntersectionObserver新api
05-16
插件简介 利用IntersectionObserver新api的img插件, 不会阻塞主线程.旧版本浏览器可以使用polyfill demo API options ...vue等使用webpack打包构建的图片 data-src图片路径和hash并对不上,这是个问题...
vue3空项目包，自己使用
05-29
5. **TypeScript支持**：Vue3原生支持TypeScript，可以更好地利用类型检查来增强代码的健壮性，减少错误。 6. **性能优化**：Vue3对性能进行了大量优化，如虚拟DOM算法的改进，编译器的优化等，使得应用运行更快，...
vue3路由使用，vue3路由使用
12-28
- **路由懒加载**：可以利用 Vite 和 Vue Router 的特性，对路由组件进行懒加载，提高初始加载速度。 5. **实际应用** - **组件通信**：通过路由参数，组件间可以传递数据，比如在跳转时携带参数。 - **页面过渡...
原生图片懒加载（兼容vue2、vue3）（可指定区域加载图片、垂直方向 以及 水平方向）
qq_52373373的博客
04-23 202
前端原生图片懒加载（兼容vue2、vue3）（可指定区域加载图片、垂直方向 以及 水平方向）
uniapp小程序intersectionObserver实现列表图片懒加载
fangfujiGG的博客
03-12 3847
uniapp小程序intersectionObserver实现列表图片懒加载
vue3 图片懒加载的实现
YWW_ABC的博客
04-15 2462
图片懒加载就是鼠标滑到哪，图片就加载到哪 一 开始把图片的地址放在data-set属性中，而不是放在src中，这样图片就不会发送http请求。我们通过计算距离，当 整个页面的高度 < 页面滑动的距离 + 浏览器可视区域的距离 的时候，就把data-set属性换为src属性，将图片显示出来
VUE图片懒加载-vue lazyload插件使用方法
JackieDYH的博客
12-10 571
一. vue lazyload插件： 插件地址---demo 二. 简单使用实例： 这个插件还是蛮好用的，就是感觉这个插件的开发文档有点太啰嗦了，一股脑把所有的api扩展都罗列出来，源码中并没有可以运行的实例提供。 其实这个插件做简单使用的话是很简单的，看官方文档的话反而被误导了，可以先按下边的实例实现简单引用，后边再根据开发文档做扩展。 1. 安装插件： npm install vue-lazyload --save-dev 2. main.js引入插件： import VueL
vue3实现懒加载
IU
09-27 891
做项目碰到了需要同时加载四十多个图标的需求，如果不管，会导致页面加载时图标区域长时间的空白，为了解决这种问题，我尝试使用懒加载解决。
vue3 中的懒加载
加油小伙子
08-02 618
createApp(App).use(VueLazyLoad, { loading: '/imgs/loading-svg/loading-bars.svg' }).mount('#app') <img v-lazy="item.img" alt=""> npm ivue3-lazyload
vue3项目之vue-lazyload 图片懒加载
m0_63907100的博客
03-07 621
vue-lazyload 图片懒加载
Vue3组件数据懒加载
qq_39025142的博客
12-08 684
单张页面数据较多时，可以使用组件数据懒加载，减少网络请求，提高页面的响应速度。 安装npm i @vueuse/core -S 库，用到其中的 useIntersectionObserver 来实现监听进入可视区域行为，配合vue3.0的组合API的方式实现。 封装方法 index.js //提供复用逻辑 import { useIntersectionObserver } from "@vueuse/core" import {ref} from 'vue' // 数据懒加载函数 // targe.
前端图片懒加载和路由懒加载
06-06
前端图片懒加载（Image Lazy Loading）和路由懒加载（Route Lazy Loading）是两种不同的优化技术，用于提高用户体验和网站性能。 1. **图片懒加载**： - 图片懒加载是一种延迟加载策略，当用户滚动到图片所在位置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青空W

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值