在 Flutter 中更快地加載圖像資源!

語言: CN / TW / HK

我們可以把圖片放在我們的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.pnghome_bg.png 緩存到ImageCache中。所以現在,無論何時我們使用這張圖片,它都會加載得更快。

這是一個方便的技巧,以加載你的圖像資產更快!下面是使用和不使用 precacheImage() 加載圖像所需時間的一個小統計

你可以看到,開始的 3 個打印語句是沒有 precacheImage 的,每次都花費近 10 毫秒。現在,下一個是 precacheImage,它在緩存中存儲圖像需要 14 毫秒。隨後的加載只用了 5 毫秒。所以我們可以得出結論,它將加載時間減少到近 50%!您可以在 GitHub 上找到相同的代碼!

原文:https://abhishekdoshi26.medium.com/load-your-image-assets-faster-in-flutter-13d06037af2b

猜你喜歡