为啥偶尔会在 ListView 中加载错误的图像？

Posted 2023-05-07

【中文标题】为啥偶尔会在 ListView 中加载错误的图像？

【英文标题】：Why are wrong images getting loaded in ListView occasionally?为什么偶尔会在 ListView 中加载错误的图像？

【发布时间】：2015-11-28 03:09:16

【问题描述】：

我有一个列表视图，可以异步加载每个单元格中的图像。当我尝试缓慢向下滚动时（在当前视图中的所有图像都加载后），它可以完美地工作。 但是当我尝试在它们加载之前向下滚动并向上滚动时，我遇到了这个问题。单元格开始显示与其不对应的图像。

我的 getView 方法如下所示：

public View getView(final int position, View convertView, ViewGroup parent) 

    // TODO Auto-generated method stub

    View rowView = null;

    if(convertView == null) 
        rowView = inflater.inflate(R.layout.list_posts_item, null);
        final Holder holder=new Holder();
        holder.tvTitle=(TextView) rowView.findViewById(R.id.tvTitleNamePost);
        holder.ivPrimaryImage=(ImageView) rowView.findViewById(R.id.ivPrimaryImage);
        holder.tvLocality=(TextView) rowView.findViewById(R.id.tvLocalityPosts);
        holder.tvDateCreated=(TextView) rowView.findViewById(R.id.tvDateCreated);
        rowView.setTag(holder);
    else 
        rowView=convertView;
    

    Holder holder = (Holder)rowView.getTag();
    holder.ivPrimaryImage.setId(position);
    holder.ivPrimaryImage.setTag(listOfPosts.get(position).getPostId());
    holder.ivPrimaryImage.setImageBitmap(null); // Added for flickering issue
    holder.tvTitle.setText(listOfPosts.get(position).getTitle());
    holder.tvLocality.setText(listOfPosts.get(position).getLocality());
    holder.tvDateCreated.setText(listOfPosts.get(position).getCreatedDate());
    postId = listOfPosts.get(position).getPostId();
    Image image = new Image();
    image.setImg(holder.ivPrimaryImage);

    if (!"N".equalsIgnoreCase(listOfPosts.get(position).getHasImage()) ) 
        if(!tagsCaching.containsKey(postId))
            new GetPrimaryImages().execute(image);
        else
             holder.ivPrimaryImage.setImageBitmap(tagsCaching.get(postId));
    

    return rowView;

我的异步调用类如下所示：

public class GetPrimaryImages extends AsyncTask<Image, Void, Bitmap> 

ImageView imageView = null;
    protected Bitmap doInBackground(Image... images) 
    this.imageView=images[0].getImg();



        // Building Parameters
        List<NameValuePair> params = new ArrayList<NameValuePair>();
        params.add(new BasicNameValuePair("postid",(String)(this.imageView.getTag()) ));


             json = jsonParser.makeHttpRequest(CommonResources.getURL("get_primary_image"),
                    "POST", params);


        if(json == null)
            return null;
        
        Log.d("Fetching Image",imageView.getTag()+ json.toString());
        tagsDownloaded.add((String)imageView.getTag());
        // check for success tag
        String TAG_SUCCESS = "success";
        try 
            int success = json.getInt(TAG_SUCCESS);

            if (success == 0) 
               image =  json.getString("primaryimage");

            
         catch (JSONException e) 
            e.printStackTrace();
        

        return getImage(image);

    

    /**
     * After completing background task Dismiss the progress dialog
     * **/
    protected void onPostExecute(Bitmap result) 
        tagsCaching.put((String)imageView.getTag(), result);
        imageView.setImageBitmap(result);

    

    public Bitmap getImage(String imageString) 
        if("null".equalsIgnoreCase(imageString))
            return null;
        else
            byte[] decodedString = Base64.decode(imageString, Base64.DEFAULT);
            Bitmap decodedByte = BitmapFactory.decodeByteArray(decodedString, 0, decodedString.length);
            //image.setImageBitmap(decodedByte);
            return decodedByte;
        

    

编辑：

我给 Holder 添加了一个新的实例变量：

public class Holder

    TextView tvTitle;
    ImageView ivPrimaryImage;
    TextView tvLocality;
    TextView tvDateCreated;
    int position;

在getView中设置相同： 持有人.位置=位置； 并将持有者对象传递给异步任务： new GetPrimaryImages(position, holder).execute(image);

并修改Async调用类如下： 1.http调用增加cancel 2.更改了onPostExecute方法

  public class GetPrimaryImages extends AsyncTask<Image, Void, Bitmap> 

    int mPosition;
    Holder mHolder;
    public GetPrimaryImages(int position, Holder holder)
        mPosition = position;
        mHolder = holder;
    

    ImageView imageView = null;
    protected Bitmap doInBackground(Image... images) 
    this.imageView=images[0].getImg();



        List<NameValuePair> params = new ArrayList<NameValuePair>();
        params.add(new BasicNameValuePair("postid",(String)(this.imageView.getTag()) ));


        JSONObject json;
        if(mHolder.position == mPosition)
             json = jsonParser.makeHttpRequest(CommonResources.getURL("get_primary_image"),
                    "POST", params);

        else 
            json = null;
            cancel(true);
        

        // check log cat fro response
        if(json == null)
            return null;
        
        Log.d("Fetching Image",imageView.getTag()+ json.toString());
        tagsDownloaded.add((String)imageView.getTag());
        // check for success tag
        String TAG_SUCCESS = "success";
        try 
            int success = json.getInt(TAG_SUCCESS);

            if (success == 0) 
               image =  json.getString("primaryimage");

            
         catch (JSONException e) 
            e.printStackTrace();
        

        return getImage(image);

    


    protected void onPostExecute(Bitmap result) 
        if (mHolder.position == mPosition) 
            tagsCaching.put((String) imageView.getTag(), result);
            imageView.setImageBitmap(result);
        

    

    public Bitmap getImage(String imageString) 


        //needs to wait
        if("null".equalsIgnoreCase(imageString))
            return null;
        else
            byte[] decodedString = Base64.decode(imageString, Base64.DEFAULT);
            Bitmap decodedByte = BitmapFactory.decodeByteArray(decodedString, 0, decodedString.length);
            //image.setImageBitmap(decodedByte);
            return decodedByte;
        

    

它似乎正在工作。 :)

现在我怀疑缓存图像的最佳方法是什么？应该将其写入文件吗？并在每次向上滚动时都阅读它？

【问题讨论】：

getView(view reusing) 中的另一个“如果没有 else”+ AsyncTask 的时间错误（如果 asynctask 在视图之后完成会被重用怎么办？）... 答案：了解视图在 ListView 中重用并使用任何图像加载器库

@Selvin 看起来时间错误是问题所在。如何将其与异步任务同步？或者有没有办法跳过正在重用的视图的异步任务？

使用 LIBRARY，如果您设置新请求，大多数人都会取消后台加载...这并不容易（请随意查看来源）...您的技能是低构建自己的装载机...也if (!"N" ...没有else ....

【参考方案1】：

问题是，当您的异步任务结束其后台操作时，它所链接的元素已被回收以保存您集合中的另一个元素。

让我们关注元素位置，假设您的列表视图最多可以显示 4 个元素。

listview 第一次为前 4 个元素调用 getview，创建并运行了四个 asynctask。 然后滚动到显示位置 11 - 15，第一个元素（与位置 1 相关的元素）在 asynctask 结束之前被回收到位置 11。

然后asynctask结束，看到的是post 11相关的图片和post 1相关的bitmap。

避免这种情况的一种方法是在 asynctask 中知道视图已被回收，正如 Lucas Rocha 的这篇旧帖子中所建议的那样。

Performance tips with listview

查看帖子以了解有关 listview 工作原理的见解：

【讨论】：

@fedpaol 我在异步调用中更改了以下内容，它似乎正在工作 if(mHolder.position == mPosition) json = jsonParser.makeHttpRequest(CommonResources.getURL("get_primary_image"), "POST ", 参数);否则 json = null;取消（真）； protected void onPostExecute(Bitmap result) if (mHolder.position == mPosition) tagsCaching.put((String) imageView.getTag(), result); imageView.setImageBitmap(结果); 谢谢

【参考方案2】：

主要的“问题”是 ListViews 实现重用视图和串行提供 AsyncTasks。

1) 在 ListView 的适配器中，您正确地实现了项目的重用。在 ListView 中，只呈现了几个项目（屏幕上可见的项目 + 几个上下）。如果您开始滚动，超出屏幕的项目将被销毁，并且它们的视图将作为转换视图传递给public View getView(final int position, View convertView, ViewGroup parent)。

这是第一个问题。列表正在重复使用项。

2) 第二件事是 AsyncTask 在另一个线程上执行，但是 asyncTask 的更多实例在同一个线程上执行。这意味着它们是连续执行的。如果您滚动得足够快，那么您可以在使用 AsyncTask 加载图像时发出更多请求。一次，只有少数（我认为 5）AsyncTask 的作业在队列中等待。另一个到达被忽略。因此，如果您滑动得足够快，您将获得 5 个完整的队列，而另一个图像请求将被忽略。

这就是它。你滚动，你开始加载一些图像，新显示的图像被忽略。当您在所有 AsyncTasks 结束后停止并且您在列表项中加载了一些“随机”（先前显示的）图像。

解决方案

这件事讨论了很多次，解决了。使用例如 Picaso 库就足够了：

https://futurestud.io/blog/picasso-adapter-use-for-listview-gridview-etc/

【讨论】：

毕加索没有解释通过异步调用使其成为可能。我看到他们为图像设置了 URL。如何做到这一点？

使用毕加索它是自动异步的 =)。图书馆会自动缓存图像（来自互联网或文件系统）并将重复使用它。所以你不必担心这个。这是带有示例的官方网站：Picasso。我再说一遍：不要自己动手！使用图书馆。不要发明***；）如果您满意，请接受答案

我的疑问是如何使用 Picasso 从网络服务获取图像。图像以 blob 类型放置在 mysql db 中。

在数据库中存储图像是非常糟糕的做法。最好将其存储到具有 DB 记录 ID 的文件系统中。您可以将图像从服务作为文件返回（解码），然后在 picaso example.com/my_image_123.png

中输入该图像的 url 地址

我应该给在服务器（LAMP）上创建的图像文件什么权限。我无法查看它们。

【参考方案3】：

要添加答案，我将实现一个图像缓存（例如，作为 URL-to-WeakReference-to-image 哈希图）。 getView() 将访问该缓存，如果图像不存在，则留下请求。当图像被加载时，缓存将检查请求列表并通知发布请求的视图（将 URL 和图像传递给它们）。视图会将通知中传递的 URL 与其当前 URL 进行比较，然后使用图像或忽略它（如果视图超出屏幕或被重复使用，则必须忽略该图像）。

为什么要请求列表。有可能多个视图设法请求一些图像并在图像加载之前被重用（特别是如果您向上和向下滚动列表几次）。