如何像 instagram 一樣快速加載圖像

Question

我正在嘗試將 firebase 中的圖像加載到回收站視圖中，但問題是速度很慢，我想知道如何才能達到 Instagram 加載圖像的速度，請任何人幫助我

這是我如何將圖像從 firebase 加載到回收站視圖中的代碼

Java 文件

public class Search_Fragment extends Fragment {
    public List<Upload> mUploads;
    PostAdapter postsAdapter;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_search, container, false);
        RecyclerView postRecyclerView = view.findViewById(R.id.postRecyclerView);
        DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference("uploads");
        postRecyclerView.setLayoutManager(
                new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        );
        mUploads = new ArrayList<>();
        postsAdapter = new PostAdapter(getContext(), mUploads);
        postRecyclerView.setAdapter(postsAdapter);

        //This are images that i tried manual ly and it worked fine
//        List<PostItem> postItems = new ArrayList<>();
//        postItems.add(new PostItem(R.drawable.image1));
//        postItems.add(new PostItem(R.drawable.image2));
//        postItems.add(new PostItem(R.drawable.image3));
//        postItems.add(new PostItem(R.drawable.image4));
//        postItems.add(new PostItem(R.drawable.image5));
//        postItems.add(new PostItem(R.drawable.image7));
        databaseReference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {

                    for (DataSnapshot dataSnapshot : snapshot.getChildren()) {
                        Upload upload = dataSnapshot.getValue(Upload.class);
                        mUploads.add(upload);

                }
                //notify the adapter
                postsAdapter.notifyDataSetChanged();
            }

            @Override
            public void onCancelled(@NonNull DatabaseError error) {
            }
        });
        return view;
    }
}

**PostAdapter.java -:**適配器 class

public class PostAdapter extends RecyclerView.Adapter<PostAdapter.PostViewHolder> {
    public static List<Upload> mUploads;
    Context mcontext;


    public PostAdapter(Context context, List<Upload> uploads) {
        mUploads = uploads;
        mcontext = context;
    }


    @NonNull
    @Override
    public PostViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;
        view = LayoutInflater.from(mcontext).inflate(R.layout.post_item_container, parent, false);
        return new PostViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull PostViewHolder holder, int position) {
        Upload uploadCurrent = mUploads.get(position);
        Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
                .preload();
        Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
                .into(holder.imageView);


    }

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

    public static class PostViewHolder extends RecyclerView.ViewHolder {
        ShapeableImageView imageView;

        PostViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imagePost);
        }

    }
}

Upload.java -: model class 我在其中存儲圖像 URL

public class Upload {
    private String mImageUrl;


    public Upload() {

    }

    public Upload(String imageUrl) {
        mImageUrl = imageUrl;
    }

    public String getmImageUrl() {
        return mImageUrl;
    }

    public void setmImageUrl(String mImageUrl) {
        this.mImageUrl = mImageUrl;
    }
}

Answer 1

圖像需要時間加載，因為它們的大小。 有 2 個選項可以快速加載圖像。

1. 調整圖像大小。
2. 創建縮略圖。

對於調整大小，您可以使用 Glide 覆蓋方法：

GlideApp  
    .with(context)
    .load(url)
    .placeholder(new ColorDrawable(Color.GREY))
    .override(400, 400) // resizes the image to these dimensions (in pixel). resize does not respect aspect ratio
    .into(imageViewResize);

對於縮略圖，您必須創建較小尺寸的圖像，然后在您的應用程序中使用它。

Answer 2

簡單的答案，為了更快地加載數據到 RV 使用分頁概念。 一個錯誤的錯誤是將所有圖像（數據）一次加載到 RV。 示例一次加載 15 個數據塊使其加載速度更快。 另一個概念使用一些加載指示器（例如閃光效果布局、微調器、加載文本等）讓用戶知道數據正在加載，因此他一直在等待它。

從互聯網加載數據時，分頁非常重要