Last week, we've looked at a critical piece of image loading: caching! If you missed it, give it another look, it's worth it. This week, we'll go through another important feature of Glide: ordering image requests by prioritization.
Glide Series Overview
Prioritizing Image Requests
Fairly often, you'll run into use cases, where your app will need to load multiple images at the same time. Let's assume you're building an info screen which has a large hero image at the top and two smaller, less critical images at the bottom. For the user experience it'd be optimal that the hero image element is getting loaded and displayed first, then afterwards the less urgent ImageViews at the bottom. Glide supports your wished behavior with the Priority enum and the .priority() method.
But before we look at the example and the method calls, let's look at the priority enum, which is used as the parameter for the .priority() method, first.
Getting to know the Priority enum
The enum gives you four different options. This is the list ordered with increasing priority:
Priority.LOWPriority.NORMALPriority.HIGHPriority.IMMEDIATE
Before we jump to the example, you should know that the priorities are not completely strict. Glide will use them as a guideline and process the requests with the best effort possible, but it's not guaranteed that all images will be loaded in the requested order.
Nevertheless, if you've a use case where certain images are more important, make good use of it!
Usage Example: Hero Element with Child Images
Let's go back to our example from the beginning. You're implementing an information detail page with a hero image at the top and smaller images at the bottom. For the best user experience, the hero image should be loaded first. Thus, we'd assign Priority.HIGH to it. Theoretically, that should be enough. But to make the example a little more interesting, let's also assign the bottom images the low priority with the .priority(Priority.LOW) call:
Glide 4.x
private void loadImageWithHighPriority() {
GlideApp
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[0])
.priority(Priority.HIGH)
.into(imageViewHero);
}
private void loadImagesWithLowPriority() {
GlideApp
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[1])
.priority(Priority.LOW)
.into(imageViewLowPrioLeft);
GlideApp
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[2])
.priority(Priority.LOW)
.into(imageViewLowPrioRight);
}
Glide 3.x
private void loadImageWithHighPriority() {
Glide
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[0])
.priority(Priority.HIGH)
.into(imageViewHero);
}
private void loadImagesWithLowPriority() {
Glide
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[1])
.priority(Priority.LOW)
.into(imageViewLowPrioLeft);
Glide
.with(context)
.load(UsageExampleListViewAdapter.eatFoodyImages[2])
.priority(Priority.LOW)
.into(imageViewLowPrioRight);
}
If you run this example, you'll see that in almost all cases the hero images will be displayed first, despite being much larger image (and consequently requiring more processing time).
Outlook
Glide gives you very convenient options to prioritize images. It's a fast and easy way to bump up the user experience a bit. Go through your apps and your code and see if you can apply the techniques you've just learned!
Request priorities are very helpful, but don't always completely solve the problem. Let's assume you've to download a very large image, it'll take a while to download and process it, no matter what you set as a priority.
In the next tutorial, in order to further improve the user experience, we'll look at another tool out of the Glide toolbox: thumbnails!
