Long display time for pictures using Glide

Question

I am doing an API request to Imgur using Retrofit in order to retrieve about 40 URLs and then display them in a RecyclerView using Glide like such:

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    Glide
            .with(context)
            .load(list.get(position).getLink()) // Gets the URL in my list
            .centerCrop()
            .placeholder(R.mipmap.placeholder)
            .crossFade()
            .into(holder.imageView);
}

The request gets answered quickly, but most of my images stay as placeholders as some of them appear one by one later on.

What is causing this delay in the display of my images? Is it perhaps linked to the speed of my Internet connection?

Additionally is my approach a correct one when it comes to "large" amounts of pictures?

Please note that most ImageViews do not load, even the ones that are visible to my user.

It depends how big are the images, how much is the response time from API. — Sijan Gurung, Feb 16 '17 at 08:22
The URL format is "http://imgur.com/a/XXXXX", it depends if it is animated, it's size etc. — Christopher, Feb 16 '17 at 08:24
try Picasso for an alternative solution http://square.github.io/picasso/ — Khaledonia, Feb 16 '17 at 08:33
Any specifics on why Picasso would be a better option? Glide handles image cropping, placeholders etc. — Christopher, Feb 16 '17 at 08:41

score 1 · Answer 1 · answered Feb 16 '17 at 08:33

1

This might be depending on your internet connection. If so, you can use imgur smaller sizes, you can add one of those letter at the end of your filename:

s = Small Square (90×90)
b = Big Square (160×160)
t = Small Thumbnail (160×160)
m = Medium Thumbnail (320×320)
l = Large Thumbnail (640×640)
h = Huge Thumbnail (1024×1024)

i.e. this:

http://i.imgur.com/bF8zPs4.jpg

becomes this (for the small square):

http://i.imgur.com/bF8zPs4s.jpg

answered Feb 16 '17 at 08:33

megaturbo

680
6
24

The format of my links is `http://imgur.com/a/xxxxx`, I do not have a link to the image's location. – Christopher Feb 16 '17 at 08:38
Isn't this the url for albums ? – megaturbo Feb 16 '17 at 08:39
These are URLs from the gallery (I do an API request to retrieve a list of the currently displayed images at page X of the gallery). – Christopher Feb 16 '17 at 08:41
Which API endpoints do you use ? If you use `https://api.imgur.com/3/album/{id}` you can get a list of every images of the album. And then each image has link you can work out. – megaturbo Feb 16 '17 at 08:44
I am currently using `https://api.imgur.com/3/gallery/hot/viral/{page}` – Christopher Feb 16 '17 at 08:45
And after that how do you fetch images ? I'm just trying to understand ^^ If you query the album's images with `https://api.imgur.com/3/album/{id}/images` you could then take the link of the first and use it as a thumbnail with the _letter_ trick.. Given that you receive the album id with the gallery endpoint. – megaturbo Feb 16 '17 at 08:57
I have tried that, but given that the images have different types and that it is not always given in the data retrieved, I don't see how I can make it work for every picture. – Christopher Feb 16 '17 at 09:11
When you use this: `https://api.imgur.com/3/gallery/hot/viral/{page}` the id you get from each entry is an album entry. So you have to use this id to get images from this one album. Like, if you take `https://api.imgur.com/3/gallery/hot/viral/0` the first entry has the id `rc0HF` so you should query `https://api.imgur.com/3/album/rc0HF/images` which will return the images. You can take the first one's link and that's what you have to trick. (You HAVE to be auth to get imgur images and album, you are, right ?) – megaturbo Feb 16 '17 at 09:15
I am not authenticated as I simply wanted to display public images from the gallery. See it as a Browsing tab in my app where the user does not have to log in. But if auth is required, I'll try to figure it out. :) – Christopher Feb 16 '17 at 09:18
I'm not talking about user login, but your app has to be registered: _This version of the API, version 3, uses OAuth 2.0. This means that all requests will need to be encrypted and sent via SSL/TLS to https://. It also means that you need to register your application, even if you aren't allowing users to login._ – megaturbo Feb 16 '17 at 09:19
My app is registered and I have an ID and a Secret, I will try to authenticate myself and do what you have told me :) – Christopher Feb 16 '17 at 09:20
Ok I hope I have more helped than confused you. Good luck. – megaturbo Feb 16 '17 at 09:20

score 1 · Answer 2 · edited May 23 '17 at 11:53

Once you've set the url for the image in Glide, the image itself still needs to be downloaded and shown in the ImageView, which is causing the delay. If the images are not loading, can you check if the image url loads the image in your browser for example?

A better approach to load images in an adapter with Glide is to use a RequestManager which you pass in the constructor of your adapter. Glide will then subscribe to the lifecycle of your activity of fragment. This will prevent images from being downloaded when your activity of fragment has been destroyed, which is especially useful when Glide has to download large images.

public MyAdapter(List<Object> items, RequestManager requestManager) {
    this.items = items;
    this.requestManager = requestManager;
}    

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    requestManager
            .load(list.get(position).getLink()) // Gets the URL in my list
            .centerCrop()
            .placeholder(R.mipmap.placeholder)
            .crossFade()
            .into(holder.imageView);
}

And then you can call the constructor of your adapter in an acitivty or a fragment as such:

MyAdapter myAdapter = new MyAdapter(items, Glide.with(this));

I've been using this approach after I've found this answer from TWiStErRob.

score 0 · Answer 3 · answered Feb 16 '17 at 08:22

0

it is depend on your internet connection speed and the size of images.
if the size of images it to large,it may cause of of Memory exception.

answered Feb 16 '17 at 08:22

Ramzy Hassan

926
8
21

This might be the issue, some images on imgur are very wide. Any idea how to counter this problem? – Christopher Feb 16 '17 at 08:26
see this [answer](http://stackoverflow.com/a/8033831/6177391) that may help you @Christopher – Ramzy Hassan Feb 16 '17 at 08:34

score 0 · Answer 4 · answered Feb 16 '17 at 08:31

0

In Recyclerview, Glide only loads images in visible imageViews. ImageViews that are not visible will be loaded once you scrolldown. This is due to recycler property of RecyclerView.

Add following line in you onBindViewHolder and see the logs, you will understand it:

Log.w("Link", list.get(position).getLink());

answered Feb 16 '17 at 08:31

Harshil

914
1
12
26

That's not my problem, perhaps I was not clear enough. Even ImageViews that are seen do not load. – Christopher Feb 16 '17 at 08:34

Long display time for pictures using Glide

4 Answers4