Flutter中更快地加载您的图像资源

简介: 本文主要介绍在Flutter中更快地加载您的图像资源 我们可以将图像放在我们的资产文件夹中,但如何更快地加载它们?这是 Flutter 中的一个秘密函数,可以帮助我们做到这一点 — precacheImage()

本文主要介绍在Flutter中更快地加载您的图像资源 我们可以将图像放在我们的资产文件夹中,但如何更快地加载它们?这是 Flutter 中的一个秘密函数,可以帮助我们做到这一点 — precacheImage()

网络异常,图片无法展示
|

很多时候(尤其是在 Flutter Web 中),您的本地资源图像需要花费大量时间在屏幕上加载和渲染!

对于用户的角度来看E本是不好秒 pecially如果图像是屏幕的背景图像。如果图像是您屏幕中的任何组件,我们仍然可以显示微光或其他内容,以便用户知道该图像正在加载。但是我们不能对背景图像显示微光!

我们在 Flutter 中有一个简单而有用的方法,我们可以用它来更快地加载我们的图像 ——precacheImage()!

precacheImage 将 ImageProvider 和 context 作为必需参数并返回 Future

Future<void> precacheImage( 
    ImageProvider<Object> provider, 
    BuildContext context, 
    {Size? size, 
    ImageErrorListener? onError} 
)
复制代码

此方法将图像预取到图像缓存中,然后无论何时使用该图像,它的加载速度都会快得多。但是,ImageCache 不允许保存非常大的图像。

由于在此需要上下文,因此我们可以在可访问上下文的任何函数中添加 precacheImage()。我们可以将相同的内容放在第一个屏幕的didChangeDependencies() 方法中!

例子:

void didChangeDependencies()
{ precacheImage(AssetImage("assets/logo.png"), context); 
precacheImage(AssetImage("assets/home_bg.png"), context);
super.didChangeDependencies();  
}
复制代码

上面的例子将缓存logo.pnghome_bg.png放入ImageCache。所以现在,无论何时我们使用这个图像,它都会加载得更快!

结论

这是一个方便的提示,可以更快地加载您的图像资源!这是一个关于使用和不使用precacheImage() 加载图像所需时间的小统计数据

网络异常,图片无法展示
|

你可以看到,开始的 3 个打印语句是没有 precacheImage 的,每次都花费近 10 毫秒。现在,下一个是 precacheImage,它在缓存中存储图像需要 14 毫秒。随后的加载只用了 5 毫秒。所以我们可以得出结论,它将加载时间减少到近 50%!



相关文章
Flutter ListView懒加载(滑动不加载,停止滑动加载)
前言:为了更好的减小网络的带宽,使得列表更加流畅,我们需要了解懒加载,也称延迟加载。关于上一章的登录界面,各位属实难为我了,我也在求ui小姐姐,各位点点赞给我点动力吧~
|
2天前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
|
2天前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
4月前
|
UED
flutter笔记:骨架化加载器
flutter笔记:骨架化加载器
139 0
|
11月前
|
存储 移动开发 前端开发
flutter系列之:做一个图像滤镜
很多时候,我们需要一些特效功能,比如给图片做个滤镜什么的,如果是h5页面,那么我们可以很容易的通过css滤镜来实现这个功能。 那么如果在flutter中,如果要实现这样的滤镜功能应该怎么处理呢?一起来看看吧。
|
Dart IDE 开发工具
Flutter框架对热重载在项目里的深度运用,状态热重新加载以及静态字段被延迟初始化【Flutter】
Flutter框架对热重载在项目里的深度运用,状态热重新加载以及静态字段被延迟初始化【Flutter】
|
JSON 数据格式 容器
解决盒约束、widget和assets里的加载资产技术在Flutter框架运用的方案【Flutter高级技术】
解决盒约束、widget和assets里的加载资产技术在Flutter框架运用的方案【Flutter高级技术】
|
前端开发 Android开发 iOS开发
Flutter 目录结构和项目资源
Flutter 目录结构和项目资源
389 0
|
编解码 iOS开发
详解flutter中本地资源图片的使用
flutter中我们想加载本地图片,需要两步:
详解flutter中本地资源图片的使用
|
Android开发 iOS开发
在 Flutter App 中使用相机和图库/照片选取图像
在 Flutter App 中添加图像选取器 — 使用相机和图库/照片选取图像 图像选择器是我们经常需要的用户配置文件和其他内容的常见组件。我们将使用此插件。 步骤 1 — 将依赖项添加到pubspec.yaml文件。
477 0