乐趣区

关于flutter:在-Flutter-中更快地加载图像资源

咱们能够把图片放在咱们的 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() 加载图像所需工夫的一个小统计

你能够看到,开始的 3 个打印语句是没有 precacheImage 的,每次都破费近 10 毫秒。当初,下一个是 precacheImage,它在缓存中存储图像须要 14 毫秒。随后的加载只用了 5 毫秒。所以咱们能够得出结论,它将加载工夫缩小到近 50%!您能够在 GitHub 上找到雷同的代码!

退出移动版