在 Flutter 中更快地加载图像资源!

DBA护表使者
• 阅读 1790

我们可以把图片放在我们的assets文件夹中,但如何更快地加载它们呢?这里有一个Flutter中的秘密函数可以帮助我们做到这一点--precacheImage()

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

这对用户来说是不利的,特别是如果该图像是你的屏幕的背景图像。如果图像是屏幕上的任何组件,我们仍然可以显示闪烁的微光(shimmer)或其他东西,以便用户知道图像正在加载。但是,我们不能为背景图片显示闪烁的微光,对吗?

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

precacheImage 将ImageProvider和context作为必要参数,并返回 Future<void>

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.png 和 home_bg.png 缓存到ImageCache中。所以现在,无论何时我们使用这张图片,它都会加载得更快。

这是一个方便的技巧,以加载你的图像资产更快!下面是使用和不使用 precacheImage() 加载图像所需时间的一个小统计

在 Flutter 中更快地加载图像资源!

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

点赞
收藏
评论区
推荐文章
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
Vue.js的图片加载性能优化你可以试试
前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。备注以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的。资源Vue.jsElementUI优化一:图片加载动画只有当图片加载完成后才可以显示图片,加载动画结束。我们使用ElementUI
Souleigh ✨ Souleigh ✨
4年前
你可能不知道的 Create React App 的一些技巧
在本文中,我们将探讨提供的鲜为人知但非常有用的功能。让我们开始吧!在HTTPS而不是HTTP上提供应用程序有时我们需要在HTTPS上测试我们的应用程序,以在部署到生产之前检查所有API是否正常工作。Createreactapp提供了一种简单的方法来做到这一点。.env在您的项目文件夹中创建一个(dotenv)文件并HTTPStrue在其
浩浩 浩浩
4年前
【Flutter实战】图片和Icon
3.5图片及ICON3.5.1图片Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvi
浩浩 浩浩
4年前
【Flutter实战】资源管理
2.4资源管理FlutterAPP安装包中会包含代码和 assets(资源)两部分。Assets是会打包到程序安装包中的,可在运行时访问。常见类型的assets包括静态数据(例如JSON文件)、配置文件、图标和图片(JPEG,WebP,GIF,动画WebP/GIF,PNG,BMP和WBMP)等。指定assets和包管理一样,Flutter
Stella981 Stella981
4年前
Flutter
在Flutter加载网页?也是有WebView的哦,和Android一样1.添加依赖dependencies:flutter\_webview\_plugin:^0.2.122.导入库import'import'package:flutter\_webview\_plugin/flutter\_webview\_plug
Stella981 Stella981
4年前
Cocos Creator 资源加载流程剖析【三】——Load部分
Load流程是整个资源加载管线的最后一棒,由Loader这个pipe负责(loader.js)。通过Download流程拿到内容之后,需要对内容做一些“加载”处理。使得这些内容可以在游戏中使用。这里并不是所有的资源都需要进行一个加载处理,目前只有图片、Json、Plist、Uuid(Prefab、场景)等资源才会执行加载的流程,其他的资源在Downloa
Wesley13 Wesley13
4年前
08、开源游戏
资源加载器 resourceloader.js初始化资源加载器用于读取图片和音乐,在前面的代码(main.js)中,我们初始化了它,下面我们详细说下,因为它在以后中会经常用到,游戏中所有的资源都由它来读取。$(window).load(function() {resourceloader.init();
Stella981 Stella981
4年前
DirectX3D设备丢失(lost device)的处理(一)
在创建时使用D3DPOOL\_MANAGED标志的资源可以不需要重新载入,但D3DPOOL\_DEFAULT加载的资源就需要先释放,后重建。通常需要这样处理的有ID3DXFont和ID3DXSprite,而.X模型什么的就不需要。在发现设备丢失时,我们要调用 OnLostDevice(void)函数让D3DPOOL\_DEFAULT加载的资
深入理解 Flutter 图片加载原理 | 京东云技术团队
Flutter官方为我们提供了Image控件可实现图片的加载及显示,Image控件本身是一个StatefulWidget,那么在图片显示过程中是如何加载及显示出来的呢?本篇文章将逐步分析Flutter中图片加载原理,理解了Flutter图片源码的加载原理后对我们有什么帮助?
程序员小五 程序员小五
1年前
融云IM干货丨有没有插件能帮我优化uni-app的页面加载速度?
根据您的需求,以下是一些可以帮助优化uniapp页面加载速度的插件和方法:1.图片懒加载插件:使用图片懒加载可以显著减少首屏的加载时间。可以在页面滚动时才加载图片,减少初次加载的压力。2.代码拆分和懒加载:根据页面和功能的使用情况,将代码拆分为多个模块,并