图片懒加载与瀑布流原理、vue2.0和3.0区别

最新推荐文章于 2024-06-07 16:16:10 发布
最新推荐文章于 2024-06-07 16:16:10 发布
阅读量469 收藏
点赞数
分类专栏： 知识 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47252519/article/details/107345251
版权
本文介绍了图片懒加载的概念、作用及其实现方法，强调通过设置data-src和实时判断图片是否在可视范围来优化加载。接着探讨了瀑布流的原理和实现步骤，指出其核心是对比列高并动态添加元素。最后，文章对比了Vue2.0和3.0的区别，包括默认的懒观察、更精准的变更通知、新增的TypeScript和PWA支持，以及命令和项目目录结构的变化。
摘要由CSDN通过智能技术生成

图片懒加载

（1）什么是懒加载

当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片，这就是图片懒加载

（2）懒加载的作用

减少或延迟请求数，缓解浏览器的压力，增强用户体验

（3）懒加载的实现方法

1.设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址
2.页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在可视范围内
3.当页面在可视范围内时，通过js自动改变该区域的图片的src属性为真实地址
`

    1.document.documentElement.clientHeight获取屏幕可视窗口大小；
	2.document.documentElement.scrollTop获取浏览器窗口顶部与文档顶部之间的距离
最低0.47元/天 解锁文章
qq_47252519
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
瀑布流与懒加载
KaisonYi的博客
05-25 1278
图片懒加载 图片都是一个loading的加载状态 举例：瞬间，互联网要获取20张网络图片的请求，稍等片刻之后，并不是一开始就展示所有的图片，滚动哪里就加载几张图片 图片懒加载的作用 作用： 缓解网络压力，使得用户体验更好 img缓存机制 图片懒加载如何展现的呢，img指向一个图片，其它的img也只是加载加载这个图片，其它的图片片加载的时候，直接从缓存里面进行加载 图片的懒加载的问题 如何判断图片...
VUE官方文档最新离线文档(2.0和3.0)
11-02
VUE官方文档(2.0和3.0)，不需要安装任何HTTP_SERVER，WINDOWS/LINUX下都可以使用，不好用或者资源是假的，留言骂我，不要客气。
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
10-15
主要介绍了vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多,本文分步骤通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
【JS】懒加载和瀑布流
Zhouzhouzzz冲鸭
09-16 412
懒加载 当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。为了防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃，从而减少或延迟请求数，缓解浏览器的压力，增强用户体验。 原理： 设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是...
基于Vue3实现图片瀑布流排序
weixin_44416058的博客
05-23 1427
vue3+tailwindcss实现瀑布流组件
懒加载瀑布流
小鱼酱酱酱~
05-29 540
今天用函数封装的方法写下懒加载瀑布流特效1
vue3.0实现图片懒加载
weixin_57246557的博客
09-16 668
目的： 当图片进入可视区域内去加载图片，且处理加载失败（默认图片），封装成指令。 1.了解IntersectionObserver（） 参考链接：IntersectionObserver // 创建观察对象实例 // const observer = new IntersectionObserver(callback[, options]) const observer = new IntersectionObserver(([{isIntersecting}], observer) => {
vue-cli2.0转3.0之项目搭建的详细步骤
10-17
在从 Vue CLI 2.0 迁移到 3.0 的过程中，首先需要了解两者的主要区别。Vue CLI 2.0 使用的是基于 `vue init` 的命令来创建项目，而 3.0 引入了全新的 `@vue/cli` 全局命令行工具，它提供了一个交互式的项目创建向导...
卸载vue2.0并升级vue_cli3.0的实例讲解
10-15
**Vue 2.0 与 Vue 3.0 的主要区别** Vue 3.0 带来了许多改进和优化，包括但不限于： 1. **更小的体积**：Vue 3.0 通过优化代码结构和引入 Tree-shaking 支持，使得核心库的大小显著减少。 2. **Composition API**：...
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
vue-count-to:vue-countTo的改造版本，支持 vue 2.0、3.0 版本
04-30
兼容当前版本同时兼容 vue2、vue3，亦能在ts下使用运行环境已经测试的运行环境，vite建议使用2.0+，webpack建议使用4.0+、安装 && 引入安装npm install vue3-count-to --save# 或yarn add vue3-count-to --save全局...
kuan-vue-waterfall:vue3.0瀑布流插件
05-12
kuan-vue-waterfall （vue3.0 瀑布插件） 不需要设置内容高度，间隙默认 0 注意：如果没有图片需要延迟获取元素尺寸的话，可以设置delay=false，等待图片加载后显示元素体验比较差 安装 yarn add kuan-vue-waterfall # order npm install kuan-vue-waterfall 使用 import WaterFall from 'kuan-vue-waterfall' export default { components: { WaterFall, }, } 参数 water-fall属性 data {Array}: 数据源列表 [{key: ''}] width {String|Number}: 单个卡片的宽度 gap {String|Number}: 单个卡片之间边距 delay {Boolean}
垂直瀑布流 懒加载
03-31
简单的瀑布流案例，垂直方向显示图片模块， .html里的纯javascript只做参考，真正使用时调用的还是jQuery+lazy.js
瀑布流（集成懒加载）
01-06
jquery实现瀑布流+懒加载，项目集成了 AnimOnScroll.js、imagesloaded.js、masonry.pkgd.min.js
懒加载案例lazyload
08-27
懒加载案例 lazyload 自己做了一个懒加载的案例，供大家参考
javascript瀑布流式图片懒加载实例解析与优化
10-22
主要针对javascript瀑布流式图片懒加载实例进行解析与优化，感兴趣的小伙伴们可以参考一下
VUE + 瀑布流 + 懒加载，一片文章足矣
最新发布
weixin_57564706的博客
06-07 464
vue请求到的图片进行瀑布流排序
懒加载+瀑布流 vue
L_csdn123的博客
07-29 383
举个栗子： // HTML： <div class="box"> <div class="card"> <div> <img @load="loadImg()" src="url" alt="" /> // 可以循环放图片 </div> </div> </div> //JS methods:{ loadImg() { this.waterFall(4); // 一排4个，可以根
ajax瀑布流布局,懒加载 & 瀑布流布局
weixin_32466193的博客
08-06 450
前几天星星零零的学习，终于搞定了懒加载和瀑布流布局，下面我们通过这篇文章一起学习和探讨一下~懒加载首先，什么是懒加载呢？原理？其原理是：将图片的 src 设置为统一的一张默认图片 / loading图 / logo / 空白图片(这样做会使网络请求只有一条哦)，可以将真实图片的 src 存储到 img 标签的自定义属性 data-src 中，当图片出现在用户视野 / 可视窗口中(需要展示出来)时，...
vue2.0和3.0区别
03-27
Vue 2.0和3.0的区别如下： 1. 性能优化：Vue 3.0在编译器和运行时都进行了大量的性能优化，包括使用Proxy替代Object.defineProperty、缓存虚拟节点等，使得Vue 3.0的性能比Vue 2.0更加出色。 2. Composition API：Vue 3.0引入了Composition API，它是一种基于函数的API，可以让开发者更加灵活地组织和复用代码，同时也能够解决Vue 2.0中组件复杂度过高的问题。 3. TypeScript支持：Vue 3.0对TypeScript的支持更加完善，包括类型推断、类型注解、接口等。 4. 模板指令：Vue 3.0引入了新的模板指令，包括v-model的参数化、v-for的多个参数等，使得模板更加灵活。 5. 其他改进：Vue 3.0还改进了响应式系统、组件实例化、代码拆分等方面的问题，使得Vue 3.0更加易用和健壮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值