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小姐姐,各位点点赞给我点动力吧~
|
3月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
116 1
|
4月前
Flutter-加载中动画
Flutter-加载中动画
42 0
|
4月前
|
Shell Android开发 Python
Flutter如何正确使用图片资源
Flutter如何正确使用图片资源
73 0
|
6月前
flutter 引用图片资源遇到的问题
flutter 引用图片资源遇到的问题
83 1
|
6月前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
163 0
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
|
6月前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
46 0
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
6月前
|
UED
flutter笔记:骨架化加载器
flutter笔记:骨架化加载器
603 0
|
存储 移动开发 前端开发
flutter系列之:做一个图像滤镜
很多时候,我们需要一些特效功能,比如给图片做个滤镜什么的,如果是h5页面,那么我们可以很容易的通过css滤镜来实现这个功能。 那么如果在flutter中,如果要实现这样的滤镜功能应该怎么处理呢?一起来看看吧。
|
Dart IDE 开发工具
Flutter框架对热重载在项目里的深度运用,状态热重新加载以及静态字段被延迟初始化【Flutter】
Flutter框架对热重载在项目里的深度运用,状态热重新加载以及静态字段被延迟初始化【Flutter】