Glide使用URL从Firebase加载图像非常缓慢 [英] Glide loads images from firebase painfully slow using URLs

问题描述

我正在尝试创建一个RecyclerView，该图像由每个单元格中的ImageViews填充，并且每个图像都对应于Firebase Storage中的一个图像. 我有一个传递给我的RecyclerView适配器的字符串列表，每个字符串代表Firebase Storage中图像的URL.我将每个图像加载到onBindViewHolder()内.

I'm trying to create a RecyclerView that is populated by ImageViews in each cell and each image corresponds to an image in Firebase Storage. I have a list of Strings that is passed into my RecyclerView adapter and each one represents a URL to an image in Firebase Storage. I load each image inside the onBindViewHolder().

我得到的回报是非常缓慢地加载了几张图像(大约5张照片)，然后大约需要4分钟来加载另外5张图像，并且在这些图像之后似乎再也没有加载任何其他图像.

What i get in return is a very VERY slow loading of a few images (around 5-see picture) and then it takes around 4 minutes to load another 5 and it never seems to load any other images after these.

我已经阅读了StackOverflow上的多篇文章，但是其中大多数只是告诉您使用fitCenter()或centerCrop()，但这对我而言并没有任何改变.我还阅读了Glide的文档，其中Glide会自动对您的图像进行下采样，因此我不需要手动进行处理，对吗?任何想法，我在这里可能做错了什么?从Firebase成功检索了Url字符串，查询几乎立即得到解决，因此我认为那里没有任何问题.

I've read multiple posts on StackOverflow but most of them just tell you to use fitCenter() or centerCrop() but that doesn't change anything in my case. I also read in Glide's documentation that Glide will automatically downsample your images so i shouldn't need to do it manually, right? Any ideas what i could be doing wrong here? The Url Strings are successfully retrieved from Firebase and the queries are resolved almost instantly so i don't think there is any issue there.

更新: 为了对Glide显式请求图像的缓存，我对onBindViewHolder()方法进行了一些修改，并且我还使用了thumbnail API来下载较低分辨率的图像.现在正在加载更多图像，但是每个图像仍然需要大约7秒钟才能加载，这显然太长了.如果您有任何建议，请告诉我.

UPDATE: I've made some modifications in the onBindViewHolder() method in order to explicitly request caching of the images from Glide and i also used the thumbnail API to download lower resolutions of the images. Now more images are loading but each one still takes around 7 seconds to load which obviously is too long. If you have any suggestions let me know please.

以下是我主要活动中如何设置RecyclerView的信息:

Here's how the RecyclerView is set up in my main activity:

iconsRCV = findViewById(R.id.cardIconsRCV)
iconsRCV.layoutManager = GridLayoutManager(this,5) // set the layout manager for the rcv
val iconUrls : ArrayList<String> = ArrayList() // initialize the data with an empty array list
val adapter = CardIconAdapter(this,iconUrls) // initialize the adapter for the recyclerview
iconsRCV.adapter = adapter // set the adapter

请注意，在完成某些查询后，我会获取新数据，然后调用adapter.notifyDataSetChanged()将新数据传递到RecyclerView.

Note that i get new data when certain queries are done and then i call adapter.notifyDataSetChanged() to pass new data to the RecyclerView.

CardIconAdapter.java:

CardIconAdapter.java:

public class CardIconAdapter extends RecyclerView.Adapter<CardIconAdapter.ViewHolder> {

private  RequestOptions requestOptions = RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.ALL).centerCrop().error(R.drawable.applogotmp);
private List<String> urlsList;
private Context context;

class ViewHolder extends RecyclerView.ViewHolder {
    ImageView iconImg;
    ViewHolder(@NonNull View view) {
        super(view);
        iconImg = view.findViewById(R.id.cardIcon);
    }
}

public CardIconAdapter(Context cntxt, List<String> data) {
    context = cntxt;
    urlsList = data;
}

@NonNull
@Override
public CardIconAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View view =  LayoutInflater.from(parent.getContext()).inflate(R.layout.card_icons_rcv_item,parent,false);
    return new ViewHolder(view);
}

@Override
public void onBindViewHolder(@NonNull CardIconAdapter.ViewHolder holder, int position) {
    GlideApp.with(context).load(urlsList.get(position)).apply(requestOptions).into(holder.iconImg);
}

@Override
public int getItemCount() {
    return urlsList.size();
}
}

P.S. Firebase中的图像大小大多为200KB，但很少达到4MB.另外，R.layout.card_icons_rcv_item布局中的ImageView的尺寸为75x75.

P.S. The image sizes in Firebase are mostly udner 200KB but with a small few reaching 4MB. Also, the ImageView in the R.layout.card_icons_rcv_item layout is 75x75 in size.

推荐答案

希望您已使用最新版本的glide. 有几种方法可以更好地加载和缓存图像， 功劳归功于这个不错的

Hope you have used latest version of glide. There are few ways for better image loading and caching, credit goes to this nice article .

1.启用磁盘缓存

 val requestOptions = RequestOptions().diskCacheStrategy(DiskCacheStrategy.ALL)
 Glide.with(context).load(url).apply(requestOptions).into(imageView)

2.列表项

val requestOptions = RequestOptions()
        .diskCacheStrategy(DiskCacheStrategy.ALL)
        .signature(ObjectKey(signature))

Glide.with(context).load(url).apply(requestOptions).into(imageView)

3.覆盖图片大小(可选)

val requestOptions = RequestOptions()
        .diskCacheStrategy(DiskCacheStrategy.ALL)
        .signature(ObjectKey(signature))
        .override(100, 100) // resize does not respect aspect ratio

Glide.with(context).load(url).apply(requestOptions).into(imageView)

4.添加缩略图网址

// With thumbnail url
Glide.with(context).load(url)
        .thumbnail(Glide.with(context).load(thumbUrl))
        .apply(requestOptions).into(imageView)

// Without thumbnail url

// If you know thumbnail size
Glide.with(context).load(url)
        .thumbnail(Glide.with(context).load(url).apply(RequestOptions().override(thumbSize)))
        .apply(requestOptions).into(imageView)

// With size multiplier
Glide.with(context).load(url)
        .thumbnail(0.25f)
        .apply(requestOptions).into(imageView)

5.设置清洁每月计划

// This method must be called on the main thread.
Glide.get(context).clearMemory()

Thread(Runnable {
    // This method must be called on a background thread.
    Glide.get(context).clearDiskCache()
}).start()

6.转换位图

      // TODO remove after transformation is done
        .diskCacheStrategy(SOURCE) // override default RESULT cache and apply transform always
        .skipMemoryCache(true) // do not reuse the transformed result while running
        .diskCacheStrategy(DiskCacheStrategy.ALL) // It will cache your image after loaded for first time
        .format(DecodeFormat.PREFER_ARGB_8888) //for better image quality
        .dontTransform() // to load image faster just skip transform 
        .placeholder(R.drawable.placeholder) // use place holder while image is being load

这篇关于Glide使用URL从Firebase加载图像非常缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！