当前位置: 首页 > 科技观察

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

时间:2023-03-16 18:27:24 科技观察

我们可以将图片放在我们的资产文件夹中,但是如何更快地加载它们呢?这里有一个Flutter中的秘密函数可以帮助我们做到这一点——precacheImage()。很多时候(尤其是在FlutterWeb中),您的本地资源图像需要花费大量时间来加载和呈现在屏幕上!这对用户不利,尤其是当该图像是您屏幕的背景图像时。如果图像是屏幕上的任何组件,我们仍然可以显示微光或其他东西,以便用户知道图像正在加载。但是,我们不能为背景图像显示闪烁的微光,对吗?我们在Flutter中有一个简单而有用的方法,我们可以使用它来更快地加载我们的资产图像——precacheImage()!precacheImage将是一个ImageProvider和上下文作为必需的参数,并返回Future。FutureprecacheImage(ImageProviderprovider,BuildContextcontext,{Size?size,ImageErrorListener?onError})这个方法将图片预取到图片缓存中,那么每当图片被使用时,加载速度就会快很多。但是,ImageCache不允许保存非常大的图像。因为我们在这里需要一个上下文,所以我们可以在任何可以访问上下文的函数中添加precacheImage()。我们可以将相同的内容放在第一个屏幕的didChangeDependencies()方法中!例如voiddidChangeDependencies(){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上找到相同的代码!原文:https://abhishekdoshi26.medium.com/load-your-image-assets-faster-in-flutter-13d06037af2b