Images not being cached locally (using Universal Image Loader) - slow image load times

Question

Description of the problem: I'm creating a scrollable list of articles with thumbnails that's populated by my SQLite database. In general, it's "working" except being slow:

The images load very slowly... I thought using the "Universal Image Loader" cached the images on the device, and that that would make them appear to just scroll into view if you'd already viewed them (or at least close to that). But - when you drag up/down, none of the images are there, then 3-5 seconds later, the images start popping in (as though it's re-downloading them)

I'm changing the visibility of the thumbnail boxes on the fly, but that is working flawlessly - they don't appear to change - they just scroll into view or not, no flashing or anything. (but then the images don't appear for another few seconds).

I've tested by removing my php script after scrolling around... when I scroll back to prev spot, the images don't show up - making me assume it's loading from my PHP script EVERY time.

But according to the docs: "UsingFreqLimitedMemoryCache (The least frequently used bitmap is deleted when cache size limit is exceeded) - Used by default"

Details:

In my ArticleEntryAdapter.js I have:

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

    // We need to get the best view (re-used if possible) and then
    // retrieve its corresponding ViewHolder, which optimizes lookup efficiency
    final View view = getWorkingView(convertView);
    final ViewHolder viewHolder = getViewHolder(view);
    final Article article = getItem(position);

    // Set the title
    viewHolder.titleView.setText(article.title);

    //Set the subtitle (subhead) or description
    if(article.subtitle != null)
    {
        viewHolder.subTitleView.setText(article.subtitle);
    }
    else if(article.description != null)
    {
        viewHolder.subTitleView.setText(article.description);
    }

    ImageLoader imageLoader = ImageLoader.getInstance();

    imageLoader.displayImage("", viewHolder.thumbView); //clears previous one
    if(article.filepath != null && article.filepath.length() != 0) {
        imageLoader.displayImage(
            "http://img.sltdb.com/processes/resize.php?image=" + article.filepath + "&size=100&quality=70",
            viewHolder.thumbView
            );
        viewHolder.thumbView.setVisibility(View.VISIBLE);
    } else {
        viewHolder.thumbView.setVisibility(View.GONE);
    }

    return view;
}

As far as the images being incorrect - it's not often, but sometimes while scrolling, I'll see 2 of the same image, and when I look at the articles, they're not at all related (ie no chance of actually having the same image) So - I scroll away from it, and back, and it's no longer the incorrect image.

NOTE: I'm new to Java/Android - you probably already noticed that.

More code per comment-request:

private View getWorkingView(final View convertView) {
    // The workingView is basically just the convertView re-used if possible
    // or inflated new if not possible
    View workingView = null;

    if(null == convertView) {
        final Context context = getContext();
        final LayoutInflater inflater = (LayoutInflater)context.getSystemService
          (Context.LAYOUT_INFLATER_SERVICE);

        workingView = inflater.inflate(articleItemLayoutResource, null);
    } else {
        workingView = convertView;
    }

    return workingView;
}

UPDATE: My Manifest file has:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

But the cache folder I found is completely empty:

mnt
  -sdcard
    -Android
      -data
        -com.mysite.news
          -cache
            -uil-images

Answer 1

I was experiencing similar issues with images in list view. Possibly this answer will correct your wrong image problem.

I just downloaded the sample project with UniversalImageLoader and it exhibits the same behavior you are describing.

A few notes so far from looking through the source code.

public static final int DEFAULT_THREAD_POOL_SIZE = 3;
public static final int DEFAULT_THREAD_PRIORITY = Thread.NORM_PRIORITY - 1;
public static final int DEFAULT_MEMORY_CACHE_SIZE = 2 * 1024 * 1024; // bytes

This says that at any time there will be three threads downloading and max of 2MB of images. How big are the images you are downloading? Also are you caching to disk? If so, that will be slow.

To configure some of the basic options in the ImageLoader you will need to pass in to displayImage:

 DisplayImageOptions options = new DisplayImageOptions.Builder()
     .showStubImage(R.drawable.stub_image)
     .cacheInMemory()
     .cacheOnDisc()
     .build();

I would also like you to try these options:

ImageLoaderConfiguration imageLoaderConfiguration = new ImageLoaderConfiguration.Builder(this)
    .enableLogging()
    .memoryCacheSize(41943040)
    .discCacheSize(104857600)
    .threadPoolSize(10)
    .build();

imageLoader = ImageLoader.getInstance();
imageLoader.init(imageLoaderConfiguration);

With my testing, the images are on disk, but loading is still slow.

After extensive testing, I determined the primary issue is that UniversalImageLoader is just slow. Specifically, the ImageLoader and LoadAndDisplayImageTask are holding up the works. I (very quickly) rewrote the LoadAndDisplayImageTask as an AsyncTask and it immediately performed better. You can download the forked version of the code on GitHub.

Universal Image Loader with AsyncTasks