Many apps such as Tweetbot, Twitterrific, Alien Blue, etc. that display images from an API seem to load them in an asynchronous manner. It seems the initial viewable images are
There's no perfect answer. It's an art form to improve and tweak the various pieces involved to provide the best user experience for your app. Boiled down though, what you've described involves a proficient combination of the following:
Lazy loading
For lazy loading my absolute favorite goto is SDWebImage. To accomplish the effect you describe where the first 6 or 7 tweets don't load until the images are there you could hide the tweets initially and use SDWebImage's completion blocks to unhide them.
Pagination
Pagination refers to the practice of retrieving a set number of objects initially and pulling down the next X number of objects asynchronously before the user reaches them (usually initiated by a scroll). You could also extend this to to only load the images once the user's scroll slows or stops, so you don't waste time loading images the user scrolled right past. There are some great examples of this on GitHub, like NMPaginator, or you could roll your own using the UIScrollViewDelegate
methods.
Setup your scrollview delegate and implement:
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
if (!decelerate) {
[self loadImagesForVisibleRows];
}
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[self loadImagesForVisibleRows];
}
Then add a loadImagesForVisibleRows
method where you use [self.tableView indexPathsForVisibleRows];
to access the visible rows and lazy load the images for those rows.
Efficient payloads
Lastly, if you keep your payloads clean and light it'll save you some loading time, especially for users with weak network connections. I'd recommend Vinay's Sahni's blogpost, Best Practices for Designing a Pragmatic RESTful API, for a lot of great information on RESTful API design and pagination.
Welcoming any suggestions or additions to the above.