Android Glide Image is not showing on the first screen

Question

I am using Android glide to load remote images, but here i met a strange problem which image on the first screen not showing but while i scroll down and scroll up again, those images become showing normally.here is the screen shot: I have also googled such question and find a duplicate ,and after trying such steps it still doesn't work, and you may need to check code, here is it:

public class SiteAdapter extends ArrayAdapter<Site> {
private int resourceId;
private List<Site> sites = null;
private Context context;
private SiteHolder siteHolder;
/**
 * @param context the current activity context, we can get it using the super ArrayAdapter constructor
 * @param resource the site_layout.xml file
 * @param objects the collection to store all the sites
 */
public SiteAdapter(Context context, int resource, List<Site> objects) {
    super(context, resource, objects);
    this.context = context;
    this.resourceId = resource;
    this.sites = objects;
}

@Override
public Site getItem(int position) {
    return sites.get(position);
}

@Override
public int getCount() {
    return sites.size();
}

//get the viewpage which inflate by site_layout.xml file
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    Site site = getItem(position);
    View view = convertView;
    siteHolder = new SiteHolder();
    if (view == null) {
        LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = vi.inflate(resourceId, null);
    }
    //this place we need to get the whole widget in site_layout.xml file
    siteHolder.image = (ImageView) view.findViewById(R.id.thumbnail);
    siteHolder.address = (TextView)view.findViewById(R.id.address);
    siteHolder.mallName = (TextView) view.findViewById(R.id.name);
    siteHolder.distance = (TextView) view.findViewById(R.id.distance);
    siteHolder.address.setText(site.getAddress());
    //set name of the view
    siteHolder.mallName.setText(site.getName());
    //set price of the view
    //set distance of the view
    siteHolder.distance.setText("<" + site.getDistance() + "m");
    //set image
    ImageTask task = new ImageTask();
    task.execute("http://xxxx/springmvc/getFirst/" + site.getName());
    return view;
}

//检测adapater中加载网络资源是否可行?结论:不可行
public String getImgUrl(String str){
    String data = "";
    try {
        URL u = new URL(str);
        HttpURLConnection conn = (HttpURLConnection) u.openConnection();
        InputStream is = conn.getInputStream();
        BufferedReader br = new BufferedReader(new InputStreamReader(is));
        String content = "";
        StringBuffer sb = new StringBuffer();
        while((content = br.readLine()) != null){
            sb.append(content);
        }
        data = sb.toString();
        br.close();
        is.close();
    } catch (MalformedURLException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
    return data;
}
class ImageTask extends AsyncTask<String, Void, String>{

    @Override
    protected String doInBackground(String... str) {
        String data = "";
        data = getImgUrl(str[0]);
        return data;
    }

    @Override
    protected void onPostExecute(String s) {
        Glide.with(context)
            .load(s)
            .fitCenter()
            .into(siteHolder.image);
    }
}

class SiteHolder{
    ImageView image;
    TextView mallName;
    TextView address;
    TextView distance;
    }
}

if there anybody who met such scene before, thank you in advance.

Answer 1

See https://github.com/bumptech/glide/blob/master/README.md#compatibility

Round Pictures : CircleImageView / CircularImageView / RoundedImageView are known to have issues with TransitionDrawable ( .crossFade() with .thumbnail() or .placeholder() ) and animated GIFs, use a BitmapTransformation ( .circleCrop() will be available in v4) or .dontAnimate() to fix the issue.

In short: the rounding views always rasterize the incoming Drawables into Bitmaps, which won't work if there's an animation inside the Drawable (GIF or crossFade).

On the first load the placeholder is shown while retrieving the image and then crossFaded to the image; later, when you scroll up the image is loaded from memory cache immediately so there's no animation.

Answer 2

While responding at https://github.com/bumptech/glide/issues/1508 I discovered the potential root cause of your images not loading: in getView you overwrite siteHolder , so whichever ImageTask finishes, it always updates the last bound row instead of the original row that the task was started for. For more tips on how to improve Glide related code in a double-dispatch case like this, see the issue on GitHub. Quick and dirty fix:

public class SiteAdapter extends ArrayAdapter<Site> {
    //private SiteHolder siteHolder; // remove this field

public View getView(int position, View convertView, ViewGroup parent) {
    SiteHolder siteHolder = new SiteHolder();
    ...
    ImageTask task = new ImageTask(siteHolder);
    ...
}

static class ImageTask extends AsyncTask<String, Void, String> {
    private SiteHolder siteHolder; // TODO initialize in constructor
    // rest stays the same, but notice the `static` modifier above!
}