Picasso image load callback

Question

I want to use Picasso to load three consecutive images one on top of each other in a listview. Using the methods Picasso provides makes this easy. However because these images are loading in at different times it causes a flickering effect as the images come in. For example sometimes image 2 appears before image 1, and when image 1 loads it causes an unnatural stutter. It would be better if I could set the listview's visibility to invisible until all the images are available to be shown. However, there is no callback method I could find for Picasso that would signal when an image has been loaded.

Does anyone know of a solution for this kind of a situation using Picasso?

Thanks

Answer 1

You could use the Target object. Once target1 receives the callback, you can download the 2nd asset, then get the callback in target2, then trigger the 3rd download.

Answer 2

This is loading a image url into an imageview with simple picasso callbacks

           Picasso.with(this)
            .load(Picurl)
            .into(Imageview, new Callback() {
                        @Override
                        public void onSuccess() {

                        }

                        @Override
                        public void onError() {


                        }
                    }
            );

And this is picasso image loading with more callbacks

private void loadImage() {
    Picasso.with(this)
            .load(PicURL)
            .into(mContentTarget);
  }


private Target mContentTarget = new Target() {
    @Override
    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
    Imageview.setImageBitmap(bitmap);
    }

    @Override
    public void onBitmapFailed(Drawable errorDrawable) {
    }

    @Override
    public void onPrepareLoad(Drawable placeHolderDrawable) {
    }
};

Answer 3

You can implement a callback with Picasso like shown below:

ImageHandler.getSharedInstance(getApplicationContext()).load(imString).skipMemoryCache().resize(width, height).into(image, new Callback() {
            @Override
            public void onSuccess() {
                layout.setVisibility(View.VISIBLE);
            }

            @Override
            public void onError() {

            }
        });
}

The implementation of my ImageHandler class is shown below:

public class ImageHandler {

    private static Picasso instance;

    public static Picasso getSharedInstance(Context context)
    {
        if(instance == null)
        {
            instance = new Picasso.Builder(context).executor(Executors.newSingleThreadExecutor()).memoryCache(Cache.NONE).indicatorsEnabled(true).build();
        }
        return instance;
    }
}

Answer 4

Here is a simple example how to impement Picasso picture loading callback:

Picasso.with(MainActivity.this)
            .load(imageUrl)
            .into(imageView, new com.squareup.picasso.Callback() {
                        @Override
                        public void onSuccess() {
                            //do smth when picture is loaded successfully

                        }

                        @Override
                        public void onError() {
                            //do smth when there is picture loading error
                        }
                    });

Answer 5

The .into method provides a second argument which is a callback to success and failure. You can use this to keep track of when all three have been called and act on their visibility all at once.

Javadoc: https://square.github.io/picasso/2.x/picasso/com/squareup/picasso/RequestCreator.html#into-android.widget.ImageView-com.squareup.picasso.Callback-