Don’t show placeholder when loaded from cache

[msw333]

Maybe I am doing something wrong: it is perfect to show a placeholder, like a progress indicator, when an image is loaded from a web source.

But I don’t think it is a good idea to show a placeholder when images are loaded from cache, since they can appear directly.

Highly appreciate your comment on that.

[crush3r]

I agree.

If the image has already been downloaded once, even after restarting the application, it should be displayed immediately instead of the placeholder.

It is the last thing I need. It would be great!

[roidy]

I agree this needs fixing, it looks terrible in list based apps when a placeholder flashes up for a split second while the cached image is loaded. Placeholder should only be shown when getting an image across the network or if no image exists.

[cubissimo]

Maybe a simple new parameter allowing us to choose if we want or not this behavior

[renefloor]

Would you want to keep the fading animation in that case or not?

[hgl]

@renefloor I think if the image already exists in cache, it should display immediately just like a regular image, without any fading animation.

[KaiP-598]

Hi,
I have the same problem here, I am using this in the listview, and when I scroll up or down, although the images are cached, but there's still a split second before the image is shown.

[ejdrian313]

its very important to me to avoid placeholder on cached images. so is any of you found a solution for this?

[kansson]

Any updates on this? Kind of a deal breaker for me..

[royibernthal]

Joining this issue, a way to avoid that split second flash for an already cached image would be a great touch.

[SvehlaJan]

Hello. Any update on this? It is a deal breaker for me too.

[ejdrian313]

little workaround I created this widget to use with CachedNetworkImageProvider:

class ImageWidgetPlaceholder extends StatelessWidget {
  const ImageWidgetPlaceholder({Key key, this.image, this.placeholder})
      : super(key: key);

  final ImageProvider image;
  final Widget placeholder;

  @override
  Widget build(BuildContext context) {
    return Image(
      image: image,
      frameBuilder: (BuildContext context, Widget child, int frame,
          bool wasSynchronouslyLoaded) {
        if (wasSynchronouslyLoaded) {
          return child;
        } else {
          return AnimatedSwitcher(
            duration: Duration.zero,
            child: frame != null ? child : placeholder,
          );
        }
      },
    );
  }
}

with use in a container:

Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: CachedNetworkImageProvider(
            page['image'],
          ),
          fit: BoxFit.fill,
        ),
      ),

or if you now size of the image avoid layout jump:

ImageWidgetPlaceholder(
                          image: CachedNetworkImageProvider(
                            multiselect['imageUrl'],
                          ),
                          placeholder: SizedBox(
                            width: MediaQuery.of(context).size.width,
                            height: 200,
                          ),
                        )

[grantespo]

Amazing library, starred!

but unfortunately, this is a dealbreaker for me too

[cemozerr]

Any updates on this? This is a dealbreaker for me as well.

@ejdrian313 unfortunately your solution does not work (I've tested it), because regardless of loading from the network, the database, or the memory, CacheStore returns a future.

[cemozerr]

I dug deep into this issue and, correct me if I'm wrong @renefloor but, it seems like even if the image information is held in memory, the FlutterCacheManager holds the image bytes on disk. This seems to be why the image can't be displayed instantaneously.

Or generally, rather that the cache implementation the CachedNetworkImage uses does not have synchronous return methods for the image bytes that are stored either on disk or memory.

I'm currently trying to create a solution where I use a Map with limited size that return Image's Uint8List bytes as my in-memory cache, and if that cache does not contain the key I'm looking for, I'll use the CachedNetworkImageProvider to retrieve and cache the image on disk. After that caching on disk, I'm planning to save the image bytes in my in-memory cache.

UPDATE: that didn't work either. Even with image bytes or the image object itself in memory, returned with a synchronous call, the image still "flickers" before rendering properly. Here's the gist if anyone wants to see: https://gist.github.com/cemozerr/a6464251385fa7d55b7068b773d2d2b3