Question

I have a table view which displays potentially hundreds of image thumbnails. The problem I’m having is the lag when scrolling quickly.

I’ve seen lots of tutorials for lazy loading remote images but nothing for local images.

Does anyone have any suggestions or examples on how I can improve the UI speed with loading many images.

Thanks

Dann

Answer 1

When you have remote images typically you schedule an async network call that takes time to finish and this usually doesn’t impact with the table view refreshing due to the fact that the network job is done on a separate thread (unless you queue hundreds of network calls, that will slow down the whole system!)
When you work with local images typically you do the image loading from file system directly in the table view datasource

tableView:cellForRowAtIndexPath:

method which is executed by the table as soon as a new cell needs to be displayed. So having the image stored locally you’re tempted to load it immediately in the main thread, and this results in the scrolling issue.

But UITableView is a UIScrollView subclass and then it responds to UIScrollViewDelegate messages check this stackoverflow answer. So with a proper monitoring of these methods (e.g. the accelerating/decelerating and dragging ones) you can fine tune your image loading. This means that while the table is scrolling at full speed is not recommended to load any image, but as soon the table is not scrolling, or it is decelerating or it is just dragged (with the touch) you can try to load images. Typically the critical event is when the user ends dragging and the scrolling is at its max speed (there is a delegate method for this). You should study and understand very well these methods as they allow you to carefully track the scrolling events and based on them you can experiment and fine tune your image loading.

Another recommendation is that once loaded from file system you cache the image (using system cache or some cache of yours; in such case be aware with memory warnings!). You will be able to free this cache as soon as you get a memory warning as all images are already retained by the table view cell.