美文网首页
Swiper/PageView预加载图片

Swiper/PageView预加载图片

作者: 移动开发_ziank | 来源:发表于2023-04-10 14:00 被阅读0次

使用Swiper制作了轮播组件,而图片显示使用的CachedNetworkImage
在每张图片第一次被切换显示时,都会有一个加载的过程,对用户并不友好,所以就想着在图片显示前预加载对应的图片。
根据网上搜索到的flutter的PageView预加载图片的解决方法,进行了一些处理,就是在页面切换时预加载下一页图片的内容,并使用OffStage进行预加载,从而实现了图片的预加载方法。

全部图片预加载:

  Stack(
        children: [
          Swiper.children(
            index: _mediaIndex,
            loop: false,
            itemHeight: 400,
            onIndexChanged: (index) {
              _mediaIndex = index;
            },
            children: List.generate(
              imageUrlList.length,
              (index) => CachedNetworkImage(
                imageUrl: _imageUrlList[index],
              ),
            ),
          ),
          Offstage(
            offstage: true,
            child: Column(
              children: List.generate(
                imageUrlList.length,
                (index) => CachedNetworkImage(
                  imageUrl: _imageUrlList[index],
                ),
              ),
            ),
          ),
        ],
      )

预加载下一张图片

  Stack(
        children: [
          Swiper.children(
            index: _mediaIndex,
            loop: false,
            itemHeight: 400,
            onIndexChanged: (index) {
              _mediaIndex = index;
            },
            children: List.generate(
              imageUrlList.length,
              (index) => CachedNetworkImage(
                imageUrl: _imageUrlList[index],
              ),
            ),
          ),
          Offstage(
            offstage: true,
            child: Column(
              children:[
                if (_mediaIndex > 0) CachedNetworkImage(
                  imageUrl: _imageUrlList[_mediaIndex - 1],
                ),
                if (_mediaIndex < _imageUrlList.length - 1) CachedNetworkImage(
                  imageUrl: _imageUrlList[_mediaIndex + 1],
                ),
              ],
            ),
          ),
        ],
      )

相关文章

  • js-事件委托&图片预加载

    事件委托 图片预加载 吸顶条 图片预加载

  • 图片预加载

    背景 利用图片的预加载技术获得更好的用户体验 什么是有序预加载和无序预加载 jQuery插件的写法 图片预加载,预...

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

  • 前端图片加载优化

    预加载 图片预加载可以提高用户体验,对于图片画廊和图片占比很大的网页内容尤其重要 css预加载 利用css的bac...

  • 【JS】图片预加载--无序加载网站loading

    课程前言: 慕课网 --图片预加载 图片预加载的特点: ( 1、网站的Loading页 2、局部图片的加载--表情...

  • JavaScript--预加载与延迟加载

    JavaScript--预加载与延迟加载 1. 预加载:就是页面打开,图片什么的都加载好了(优先显示图片) 2. ...

  • 图片的预加载与懒加载

    图片预加载与懒加载 由名字可以知道,图片的预加载->当用户需要查看图片可以直接从本地缓存中取到(提前加载下来的),...

  • 2018-07-27

    JS实现图片预加载

  • 图片预加载、瀑布流+图片预加载

    图片预加载 图片预加载是为了解决网络卡等一些其他情况造成该显示的图片不能及时的显示,但为了提高网页的完整性,给未能...

网友评论

      本文标题:Swiper/PageView预加载图片

      本文链接:https://www.haomeiwen.com/subject/natwddtx.html