Challenges of Lazy Loading in iOS

Meet Experts - 30 Mins

by : ongraph

February 20th 2015

What is lazy loading:

The phrase “lazy loading” is used to describe the act of downloading pictures in layman’s terms. As a result, the software does not become unresponsive as images are downloaded.

However, from a technological standpoint, it is the ability to define the default procedures that are compiled and loaded into memory when a program is launched. Lazy loading is designed to speed up the startup time of an application by eliminating unused capabilities.

Lazy loading is also known as “dynamic function loading”.

The challenge of loading images remotely :

If the page requires a large number of static images, this will have little impact on an application’s performance since those pictures are kept locally on the device. When we need to load photos remotely, however, there is a danger that they won’t load appropriately and that the user will become irritated while waiting for them to appear.

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.

What it adds :

The ability to load a picture from the internet asynchronously (so you can start several loads at once while performing other tasks).
The picture caching feature can be set to Off if you don’t want your servers to be charged for too many requests from the same client for the same photos.
A customizable default image will be displayed as the distant image loads.

How it works :

The user will be able to see the information rather than having to wait for the pictures to load with a lazy loading design in place. It may be used on various platforms, but I’ll explain how it works in iOS in this post.

It’s possible to use a library or not to use one. So I’ll start with the first option, which is a simple and easy approach to implement lazy image loading in the table view.

Advantages of using a library:

Only a few lines are needed to perform this functionality.
Code will be managed and making changes in code will be easy.
Images will be displayed in visible rows automatically without delay means “Performances”.
An asynchronous image downloader
An asynchronous memory + disk image caching with automatic cache expiration handling
Animated GIF support
WebP format support
A background image decompression
A guarantee that the same URL won’t be downloaded several times
A guarantee that bogus URLs won’t be retried again and again
A guarantee that the main thread will never be blocked
Use GCD and ARC
Arm64 support

To implement lazy loading using a third-party library, you need to follow certain steps:

lazy loading using a third-party library

Download the SDWebImage library from the link.
To integrate this library into your project, make a folder (named LIB) in the application bundle and go to File Inspector. Select the folder image that says “none” from the drop-down menu. “Select your application from the xcode window, then click “New Folder” and give it the same name (called LIB) as you did in the bundle (do not use lowercase letters). After that, open Finder and select “Show in Finder” from right-click menu on the folder (named LIB) inside the app package. The steps above will move you to the folder present in Finder. Paste your library from downloads into the Finder folder. Drag and drop the library from the Finder folder onto the application bundle directory (note: don’t choose copy). This will add the library to your codebase. If you do not follow these procedures, you need not be concerned; you may use any approach to add an external library to your codebase.

Programming Part:

#import <SDWebImage/UIImageView+WebCache.h>      //1

...

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{...

// Here we use the new provided setImageWithURL: method to load the web image

[cell.imageView setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"]

placeholderImage:[UIImage imageNamed:@"placeholder.png"]]; //2

...

return cell;

}

By adding the above changes to your code, you will really see great performance from the application and your users will not feel frustrated. This works really well for most of the apps where we deal with images loading remotely.

As you can see only two lines of code make a great difference while loading images remotely. These are described below :

Import <SDWebImage/UIImageView+WebCache.h> in your file.
Use the “setImageWithURL” method that performs two functionalities it downloads images from URL and during the time interval it shows the default image. If any case image is not able to download due to any issue it shows the default image in ImageView instead of blank ImageView.

Closure

It is feasible to write customized code if you do not wish to utilize an external library, but keep in mind that we have a limit on the number of pictures that may be downloaded remotely each time. Consider that you have 1,000 photographs to download but that you are limited to a certain number (for example, 10 or other) so that it may only grab 10 images at once instead of 1000. It’s possible that the table view has visible rows. To know how to download images asynchronously using a number limit you can refer to

Need experts to code for you? Get in touch with our team of specialists today!

Happy Coding!

About the Author

ongraph

OnGraph Technologies- Leading digital transformation company helping startups to enterprise clients with latest technologies including Cloud, DevOps, AI/ML, Blockchain and more.