ImageView of ListView loading incorrect few second when scrolling ListView

Question

I'm using ListView with ImageView is a element of List. I have got problem when fast scrolling my List : The system seems to be recycling views until it loads the correct position's view in my ListView, resulting in duplicated images and text for a few seconds. After that, ImageView display images correctly. I'm using Universal Image Loader library to load images.

    @Override
public View getView(int position, View v, ViewGroup parent) {
    final PhotoViewHolder holder;
    if(v == null){
        LayoutInflater li = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = li.inflate(R.layout.photo_item_horizonal_layout, parent, false);
        holder = new PhotoViewHolder();
        holder.imgPhoto = (ImageView)v.findViewById(R.id.imgPhotoIcon);
        v.setTag(holder);
    }else{
         holder = (PhotoViewHolder)v.getTag();
    }
    //item variable is a element at position of ArrayList
    ImageLoader.getInstance().displayImage(item.getImageUrl(), holder.imgPhoto);
    ...
    }

Can anyone help me? Thanks in advanced

Answer 1

Do one thing Download Aquery from This link put that .jar File in your Lib folder and change your code to this:

  @Override
  public View getView(int position, View v, ViewGroup parent) {
    final PhotoViewHolder holder;
    if(v == null){
        LayoutInflater li = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = li.inflate(R.layout.photo_item_horizonal_layout, parent, false);
        holder = new PhotoViewHolder();
        holder.imgPhoto = (ImageView)v.findViewById(R.id.imgPhotoIcon);
        v.setTag(holder);
    }else{
         holder = (PhotoViewHolder)v.getTag();
    }
    //item variable is a element at position of ArrayList
       AQuery aQuery=new AQuery(v)
       aQuery.id(holder.imgPhoto).image(item.getImageUrl().toString());

    }

Answer 2

Use a placeholder image while image is loading . You can do that by UIL option:

DisplayImageOptions options = new DisplayImageOptions.Builder()
                .showImageOnLoading(R.drawable.placeholder)
                ......
                .build();

This should solve your problem.

Answer 3

Are you changing the image of the ImageView by yourself in a later part of the code? if you do, you should call

ImageLoader.getInstance().cancelDisplayTask(holder.imgPhoto);

so that the library knows that the link between the image and the imageview is broken