demo之模糊加载（vue3+vite）

已于 2023-02-05 15:54:45 修改
阅读量207 收藏
点赞数 1
分类专栏： demo合集 文章标签： 前端 vue
于 2023-02-05 00:08:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71735156/article/details/128887249
版权
该文章介绍了一种图片加载效果，称为BlurryLoading。通过调整图片的模糊度和百分比的可见性，随着加载进度，图片逐渐清晰，百分比数值逐渐消失，当达到100%时，定时器停止。实现这种效果主要利用了JavaScript来控制变量num的变化，以及可能结合CSS进行动画处理。
摘要由CSDN通过智能技术生成

整体思路：

图片随着百分比越来越清晰，百分比则越来越模糊直至100消失，声明一个变量num，用定时器控制这个变量，当num达到100清除定时器

实现效果：

Blurry Loading（模糊加载）

实现代码：

 

黛乔
关注
专栏目录
vue3之拆若依--记实现后台管理首页(左侧菜单栏、头部信息区域...)
小白小白从不日别的博客
06-05 477
在根目录下新建 vite 目录，在vite目录下新建plugins子目录，在plugins目录下新建以下四个文件。这里首先需要在 assets 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。: 虽然 Tailwind 提供了许多实用的 CSS 类，但为了确保这些类在所有浏览器中都能正确渲染，`：用于将 CSS 转换为 JavaScript 插件的工具，允许使用插件来处理 CSS 文件。在项目根目录下新建 tailwind.config.js 文件。
Cesium 展示——加载 tileset.json 格式的 3DTiles 模型数据
虎康的博客
02-22 1385
该模型特点：模型上的各模块均可以进行点击设置，且相机视角拉近后可以看到内部隐藏的物件模块。已给 tileset.json 文件，现需加载该模型文件，
组件逻辑系列—ImageLoader图片模糊加载组件（第一版）
weixin_46317555的博客
04-25 134
图片模糊加载组件(ImageLoader) 第一版 4月25 14:23 组件逻辑 #mermaid-svg-V7bTgViklkRHwvm5 .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-V7bTgViklkRHwvm5 .label text{fill:#333}#mermaid-svg-V7bTgVikl
vue实现图片加载清晰度
最新发布
Wx001214的博客
05-27 178
在vue组件简单写了一下 本文章 主要是实现图片的加载的清晰度 和不同尺寸大小的情况下使用。
实现同时加载大量大图里，由马马赛克变清晰过程方法
huang100qi的专栏
08-11 5026
打开一些网上的相册，在加载照片的时候，如果网速比较慢加载慢的话，它会先显示一个类似模糊有点小马赛克的质量比较差的照片，然后慢慢的变为清晰的照片，这样避免了用户在浏览照片的时候页面一片空白的情况，在html中 IMG 有个 lowsrc 属性 把图片的缩略图 放在lowsrc里面，这样的话因为缩略图是缩小的，按照原图片的比例显示就会有马赛克！ src里填写 原图片！ 这样的话，原图片比较大
实现图片加载从模糊到清晰显示的方法
weixin_30470857的博客
10-18 1130
1.通过代码控制 QQ相册最近做的一些优化方法解决了上诉两个方法的缺点和满足了用户查看照片的需求：第一时间看到照片大概情况和尽可能快的看到清晰的原图。该方法使用缩略图和原图同时加载并叠加显示，先加载缩略图并拉大显示，大图叠加在缩略图上面同时加载。缩略图很小通常很快就能给用户看到照片模糊的效果，大图加载过程中从上往下逐步覆盖缩略图，这样用户就可以看到加载过程中的大图。 如上如所示，本方法的处理步...
图片懒加载-Vue插件实现
qq_22672291的博客
08-03 575
懒加载原理和实现 原理分析 先将img标签的src链接设为同一张图片(默认图片)，当js监听到该图片进入可是窗口时，再将实际地址应用。 实现方法 判断元素是否在可视范围 ​ /** * 判断元素是否在可视范围 */ function isVisible(ele){ let windowHeight = window.innerHeight let position...
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践
xxxzzzqqq_的博客
03-15 2248
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
Vue3 + Typescript + Vite 仿 Apple Music
qq_15971559的博客
04-21 357
继上次写的 PC 网页播放器项目后又模仿 Apple Music 写了一个适配移动端的播放器,用的是 Vue3 + Typescript + Vite. 项目中有一些值得琢磨的点记录一下
vue2+vue3
weixin_43460646的博客
11-15 965
本博客主要为coderwhy的Vue2网课 + 尚硅谷Vue2+Vue3网课，所整理记录的学习笔记，仅作学习用途，如有侵权，烦请联系本人侵删。同时感谢黑马、尚硅谷老师们的辛苦教导付出，如有不足之处，欢迎各位小伙伴、官老爷们多多提意见或建议，感谢！
JS实现图片加载模糊到清晰
10-21
JS实现图片加载模糊到清晰JS实现图片加载模糊到清晰
简单js图片加载从模糊到清晰代码.zip
07-04
简单js图片加载从模糊到清晰代码是一款运用了图片预加载特性，先放一张小图占位，然后判断大图是否加载完毕，加载完毕后就用大图的src替换占位图的src，注：测试时请将网速设置低一些。
实现图片加载先模糊后清晰的效果
ygkyufcl的博客
01-11 2074
打开一些网上的相册， 在加载照片的时候， 如果网速比较慢加载慢的话， 它会先显示一个类似模糊有点小马赛克的质量比较差的照片， 然后慢慢的变为清晰的照片， 这样避免了用户在浏览照片的时候页面一片空白的情况，在html中IMG有个lowsrc属性，把图片的缩略图放在lowsrc里面，这样的话因为缩略图是缩小的，按照原图片的比例显示就会有马赛克！ ==src ==里填写原图片！ 这样的话，原图片比较大，下载的慢，lowsrc的缩略图小加载快，所以会先显示被拉伸的缩略图，等大图下载完后会显示原图，这样有个时间差，就
Vue图片渐进式加载封装
xiangruyimo_1的博客
02-26 934
图片渐进式加载 概念： 渐进式加载图片 思路: 通过 图片标签img 中 onload 事件 优先加载 模糊图片 做法: 模糊图片加载完成后触发onload事件, onload事件更改data中数据加载真实图片 渐进式图片子组件的封装 该渐进式组件接收一个对象（本地图片使用import 引入 【例子 import gradual from “@/src/img/img.png”的方式引入】） { gradual: “”, // 模糊图片（图片地址） src: “ ” // 加载图片（图片地址
Vue 实现图片高斯模糊切换效果
weixin_33816946的博客
12-12 2804
序言 最近在网上冲浪的时候总是喜欢去看一些效果，看看自己可不可以做，看到一个高斯模糊的效果，如下图所示，感觉挺简单的，所以就实现了一波： 我们来看一下具体的实现方法， 每张图上都有一个蒙版和文字，我们可以借助 opacity 来实现 然后把这个蒙版盖在图片上 然后使用 css3 中的 blur 属性来给图片设置模糊样式 .functionSubNav-image-opacity img { ...
适用于 vue.js的渐进式图片加载
qq_39146122的博客
12-21 1458
一、序言 渐进式图片加载，用低分辨率的模糊图片来做预览图，代替以前懒加载图片时用的 logo 占位图。预览图大小也在平均 2KB~3KB 之间，虽然 cdn 流量上有所增加，但用户体验却非常好。 二、准备工作 1.图片裁剪 多数 cdn 都会提供图片上传后裁剪的功能 node.js 有一个很好用的图片裁剪模块 gm 裁剪代码也很简单： // 1. 裁剪本地图片示例 const gm = require('gm') gm('./coding.jpg') .resize(20) .write('r.jpg',
vue项目图片插入不清晰，原因分析及解决办法
qq_39877681的博客
04-15 5042
vue项目图片插入不清晰，原因分析及解决办法
简单实现图片预加载（先下载模糊图，当高清图下载完成再替换成高清）
u014426774的博客
10-12 2784
//一段正则，匹配所有_min.的图片src属性 var test = /_min\./; //遍历所有的图片节点 $("img").each(function(index,obj){ if(test.test($(this).attr("src"))){ var reSrc = $(this).attr("src").replace(test,".");
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值