Displaying Images In UITableView With Minimum Delay In iOS .

Posted in: Blog

In iPhone application development, displaying images in UITableView with a minimum delay is always a mess for any developer. Why this issue arises always? Let’s find out its answer and solution for it too.

Problem

In a project, we had to display images in listings that are downloaded asynchronously from web server. When cells of images were downloaded, they were visible after some delay. The issue arises because of many reasons:

  1. Visible cells of list are created and they are put in queue for optimization and performance reasons only in an iOS app.
  2. When a user scrolls, a cell is de-queued and reuse instead of creating new cell.

Solution

The major goal was to display images with minimum delay, so that user feels smoothness in the application. Using conventional way, it was not possible to display images without delay due to either low internet speed or heavy images size. After mapping this entire situation, we decided to create a download manager that would download images in background for all cells, even when cells are not visible on screen. We designed an algorithm for downloading and caching images in queue. We implemented image-downloading process at background thread so that user interface would not stuck.

Initially it was working fine. But it was difficult to maintain caching of data and keeping record of request to save time for large set of images. We found a library SDWebImage as it downloads and cache images asynchronously at background thread. Main features of this library were:

  1. The same URL won’t be downloaded several times
  2. Bogus URLs won’t be retried again and again
  3. Main thread will never be blocked

In this way when a specific cell was visible, its image was already downloaded and cached. Displaying image from cached memory was too fast as compared to downloading from web server, that resulted in smooth appearance of images without any delay.

Leave a Reply

Your email address will not be published. Required fields are marked *