#import

Lazy Loading in iOS

By ongraph | February 20, 2015 | 3742 Views

What is lazy loading : 

In layman language , lazy loading is used to download images.So that application does not freeze up while images are being downloaded.

But from technical view point, it is the ability to specify the default routines that are compiled and loaded into memory during program launch. Because many applications contain unused features, lazy loading is meant to speed up a program’s initial opening time.

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

 

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.

 

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 :

  1. The ability to load an image from the web, Resources and Document Directory,asynchronously (so multiple load can be started the same time while doing anything else).
  2. A settable internally managed cache feature, that will prevent your servers from being charged by too much requests of the same images from the same client.
  3. A settable default image to be shown while the distant image is loading.

 

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.

It can be implemented using a library using a built-in library or without using a library. So I am going to explain first one which is a lucid and easy way to implement lazy loading of images in tableview.

 

Advantages of using a library :

  • Only few lines are needed to perform this functionality.
  • Code will be managed and make 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 main thread will never be blocked
  • Use GCD and ARC
  • Arm64 support

 

To Implement lazy loading using third party library, you need to follow certain steps:

  • Download SDWebImage library from the link https://github.com/rs/SDWebImage
  • Integrate it in your code , to integrate this library just make a folder (named LIB) in application bundle , then go to File inspector and click folder image thats shows none””. A window will appear in xcode , select your application from there and click on “New Folder” and give a same name (named LIB) that you gave it in bundle then click on choose.This process is considered as a standard way to add any external file / library/ framework and due to which relative path problem does not occur in codebase. Then right click on the folder (named LIB) present in the application bundle and select “Show In Finder”. This will move you to folder present in Finder. Copy your library from downloads and paste in folder present in Finder. From Finder folder drag and drop library to application bundle folder, (note: Do’ not select copy option). This will add library to your codebase. If any case this process is not implemented by you then need not to worry, you can adopt any manner to add 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 frustration. 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 great difference while loading images remotely. These are described below :

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

If you do not want to use external library then it is possible to write down own code but one thing that keeps in mind very clear that we provide a number limit to download images remotely every time. Consider you have 1000 images to download but you provide a number limit (it can be 10 or other) so it can download only 10 images for you everytime instead of 1000 images simultaneously. It can be visible rows of tableview. To know how to download image asynchronously using a number limit you can refer to https://developer.apple.com/library/ios/samplecode/LazyTableImages/Introduction/Intro.html

Happy Coding!

About the author

ongraph

Monthly industry insights to keep you updated on latest happenings

Follow us on Twitter
Follow us on Facebook
Follow us on Linkedin