在 Flutter 中更快地加載圖像資源！
我們可以把圖片放在我們的assets文件夾中，但如何更快地加載它們呢?這里有一個Flutter中的秘密函數(shù)可以幫助我們做到這一點--precacheImage()。
很多時候(尤其是在 Flutter Web 中)，您的本地資源圖像需要花費大量時間在屏幕上加載和渲染!
這對用戶來說是不利的，特別是如果該圖像是你的屏幕的背景圖像。如果圖像是屏幕上的任何組件，我們?nèi)匀豢梢燥@示閃爍的微光(shimmer)或其他東西，以便用戶知道圖像正在加載。但是，我們不能為背景圖片顯示閃爍的微光，對嗎?
我們在 Flutter 中有一個簡單而有用的方法，我們可以用它來更快地加載我們的資產(chǎn)圖像——precacheImage()!
precacheImage 將ImageProvider和context作為必要參數(shù)，并返回 Future
- Future<void> precacheImage(
- ImageProvider<Object> provider,
- BuildContext context,
- {Size? size,
- ImageErrorListener? onError}
- )
此方法將圖像預取到圖像緩存中，然后無論何時使用該圖像，它的加載速度都會快得多。但是，ImageCache 不允許保存非常大的圖像。
由于在此需要上下文，因此我們可以在可訪問上下文的任何函數(shù)中添加 precacheImage()。我們可以將相同的內(nèi)容放在第一個屏幕的 didChangeDependencies() 方法中!
例如
- void didChangeDependencies() {
- precacheImage(AssetImage("assets/logo.png"), context);
- precacheImage(AssetImage("assets/home_bg.png"), context);
- super.didChangeDependencies();
- }
上面的例子將把 logo.png 和 home_bg.png 緩存到ImageCache中。所以現(xiàn)在，無論何時我們使用這張圖片，它都會加載得更快。
這是一個方便的技巧，以加載你的圖像資產(chǎn)更快!下面是使用和不使用 precacheImage() 加載圖像所需時間的一個小統(tǒng)計
你可以看到，開始的 3 個打印語句是沒有 precacheImage 的，每次都花費近 10 毫秒?，F(xiàn)在，下一個是 precacheImage，它在緩存中存儲圖像需要 14 毫秒。隨后的加載只用了 5 毫秒。所以我們可以得出結(jié)論，它將加載時間減少到近 50%!您可以在 GitHub 上找到相同的代碼!
原文：https://abhishekdoshi26.medium.com/load-your-image-assets-faster-in-flutter-13d06037af2b
