如何在颤动上更快地在网络图像上加载 gif？答案

【问题标题】：How to load gif on network image faster on flutter?如何在颤动上更快地在网络图像上加载 gif？
【发布时间】：2022-09-24 06:14:57
【问题描述】：

我按照video 创建了一个 gif 搜索引擎。但是每个 gif 加载大约需要 3-10 秒，这会影响用户体验。

这是我的代码 sn-p：

GridView.builder (
  cacheExtent: 900,
  controller: _gifController,
  shrinkWrap: true,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3),
  physics: BouncingScrollPhysics(),
  itemCount: GifList.length,
  itemBuilder: (context, index) {
    return Padding(
      padding:  EdgeInsets.all(0.9),
      child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(27)),
            ),
            child: Image.network(
                GifList[index],
                height: 46,
                width:46,
                cacheHeight: 46,
                cacheWidth: 46,
                fit: BoxFit.cover,
                loadingBuilder: (BuildContext context, Widget child,
                    ImageChunkEvent loadingProgress) {
                  if (loadingProgress == null) {
                    return child;
                  }
                  return Center(
                    child: CircularProgressIndicator(
                      value: loadingProgress.expectedTotalBytes != null
                          ? loadingProgress.cumulativeBytesLoaded /
                          loadingProgress.expectedTotalBytes
                          : null,
                  );
                })),
      ),
    );
  },
)

即使我使用加载一个 gif

Image.network(https://c.tenor.com/spSgkqK707kAAAAM/ok-all.gif, fit: BoxFit.cover),

它仍可能需要长达 8 秒的时间。

我在this 之后尝试了cacheWidth 和cacheHeight，并尝试在this 之后增加缓存范围。但是加载仍然需要很长时间。

我还看到了有关使用缓存网络映像的建议。但是，由于它是一个 gif 搜索引擎，搜索许多 gif 可能会出现内存问题。

有没有办法让 gif 显示得更快？任何建议表示赞赏！

标签： flutter dart

【解决方案1】：

您只需加载大尺寸的 gif 文件...使用 tinygif 进行预览

【讨论】：