渐进式加载-基础讲解

前言:

我们在PC端用浏览器看图片的时候,经常是先看到一张模糊图,然后再渐渐的变得清晰,这种情况在看漫画的时候尤其常见(模糊图如下),这种效果就叫做渐进式加载.渐进式加载能够大大的提升体验感,我们先来了解一下渐进式加载的原理.

图片来自网络

(图片来自网络)

1.JPEG

要做到渐进式加载,我们的图片需要是JPEG格式,而JPEG格式的图片又分为两种,我们要做到渐进式加载的话,需要的是Progressive JPEG.

(1)Baseline JPEG(标准型)

这种格式的图片在保存信息的时候,是从上往下,将每一行的数据顺序的保存起来的,所以读一部分就展示的话,那么效果就会像是从上往下一点一点展示.

(图片来自网络)

(2)Progressive JPEG(渐进式)

这种格式的图片在保存信息的时候,是一帧一帧的存储的,如果逐帧逐帧的读的话,就会先看到模糊图,然后一点一点变清晰

(图片来自网络)


(图片来自网络)

2.解码

如何判断是否JPEG格式的图片呢?下面引用一段Glide框架的代码
//ImageHeaderParser.java

private static fin
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3渐进式加载图片是指使用v-progressive-image插件来实现的一种图片加载效果。该插件可以通过两个指令来实现图片的渐进加载,从高斯模糊的缩略图逐步加载到清晰的原图。这种方式可以提供更好的用户体验,同时减少了图片加载对网络带宽的需求。 要在Vue3中使用v-progressive-image插件,首先需要在main.js中引入相关文件并配置插件参数。具体步骤如下: 1. 在main.js文件中,使用import语句引入Vue和v-progressive-image插件: ``` import Vue from 'vue' import progressive from 'progressive-image/dist/vue' import 'progressive-image/dist/index.css' ``` 2. 使用Vue.use()方法安装v-progressive-image插件,并配置插件参数: ``` Vue.use(progressive, { removePreview: true, scale: true }) ``` 这样就完成了v-progressive-image插件的配置。接下来,在需要加载渐进式图片的地方,可以使用v-progressive-image的指令来实现渐进式加载效果。 总结起来,Vue3渐进式加载图片可以通过v-progressive-image插件来实现,通过配置插件参数和使用指令来实现图片的渐进加载效果。这种方式可以提供更好的用户体验和减少网络带宽的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-emage:适用于vue3的渐进式图片加载插件](https://download.csdn.net/download/weixin_42168745/16545426)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [适用于 vue.js的渐进式图片加载](https://blog.csdn.net/qq_39146122/article/details/111480212)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值