Loading images remotely in iOS applications using lazy loading
Christian Karasiewicz 270005XS4E Visits (12135)
This blog post is contributed by Praveena Oruganti, a Senior Software Engineer for Global Solutions team in IBM.
Have you ever gotten frustrated as you waited for the images in a mobile application to load? Users employ mobile apps to enhance their productivity, comfort and pleasure everywhere and all the time. Mobile applications therefore need to focus on a core utility, and they need to be fast and reliable in order to be valuable.
Users look for applications that are fast and responsive. An application that looks good should not damage its integrity by having images that fail to load quickly and therefore frustrate users. If the performance of the application is poor then the application will be rated poorly in the app stores.
The challenge of loading images remotely
If a page needs to load a lot of static images, that won’t have much impact on the performance of an application, because those images are stored locally on the device. The problem arises when we need to load images remotely using a URL. When loading remotely, there is a greater chance that the loading will take more time and the user will get frustrated waiting to see the page.
The two pictures below are related to the images loaded from a remote location using a technique called lazy loading. Here you see the bookshelf view and list view of two applications on an iOS device.
Lazy loading can help
Lazy loading offers a quick solution for remote loading of images and helps you to provide better performance to the user. When you use it, the images are loaded in an asynchronous manner. What this can do is show some default images to the user and load the images remotely. This will not negatively affect the performance of the app.
How it works
With a lazy loading design in place, the user will be able to see the data rather than having to wait for the images to get loaded. It can be used in various platforms, but in this post I will explain how it works in iOS. Below I will show you how the images can be loaded on the iOS platform for a bookshelf view and for a list view (as seen in the images above).
Add the package below to your Xcode project:
Then add the code snippet below for getting the images loaded asynchronously:
By adding the above changes to your code, you will really see great performance from the application and your users will not feel frustration. This works really well for most of the apps where we deal with images loading remotely.
I hope you find lazy loading helpful! Share your comments and your experiences with lazy loading below.