如何像 instagram 一样快速加载图像

Posted 2023-04-19

【中文标题】如何像 instagram 一样快速加载图像

【英文标题】：How to load images fast like instagram

【发布时间】：2021-07-09 05:31:19

【问题描述】：

我正在尝试将图像从 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 -:**appter 类

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 -: 我存储图像 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;
    

【参考方案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);

对于缩略图，您必须创建较小尺寸的图像，然后在您的应用中使用它。

【讨论】：

你能解释一下我没听说过的缩略图过程吗

缩略图是我们调整为更小的尺寸并上传到我们的服务器上的那些图像。我们在列表的情况下显示缩略图，当用户点击该图像时，我们在详细屏幕中显示真实图像。

顺便说一句，您也可以使用第一个选项。

你能告诉我如何在这里使用延迟加载

使用jetpack分页库

【参考方案2】：

简单的答案，使用分页概念更快地将数据加载到 RV。一个错误的错误是将所有图像（数据）一次加载到 RV。示例一次加载 15 个数据块使其加载速度更快。另一个概念使用一些加载指示器（例如闪光效果布局、微调器、加载文本等）让用户知道数据正在加载，因此他一直在等待。

从互联网加载数据时分页非常重要