urn:lsid:ibm.com:blogs:entries-77c96102-9a28-478c-b0fa-719551e9a4a3The Mobile Frontier - Tags - xcode The computing industry is undergoing major evolution positioning mobile devices as the primary personal computing device. This blog will identify concepts and observations related to that evolution - missives on the journey to a mobile computing world.03012018-01-04T04:17:15-05:00IBM Connections - Blogsurn:lsid:ibm.com:blogs:entry-b2839021-c25b-49ac-b603-7dbfbfbb53c8Loading images remotely in iOS applications using lazy loadingChristian Karasiewicz270005XS4EactivefalseChristian Karasiewicz270005XS4EactivefalseComment Entriesapplication/atom+xml;type=entryLikestrue2013-11-21T13:15:00-05:002013-12-04T12:32:55-05:00<div dir="ltr">
<a href="http://asmarterplanet.com/mobile-enterprise/blog/author/poruganti" target="_blank"><img alt="Matthew Bearup" src="http://asmarterplanet.com/mobile-enterprise/files/userphoto/1000.png" style="display: block; margin: 1em 1em 0pt 0pt; float: left; position: relative;" /></a><strong>This blog post is contributed by&nbsp;<span style="color: rgb(85, 85, 85); font-size: 13px; line-height: 16.890625px;">Praveena Oruganti, a Senior Software Engineer for Global Solutions team in IBM.</span></strong></div>
<div dir="ltr">
<p>
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.</p>
<p>
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.</p>
<p>
<strong>The challenge of loading images remotely</strong></p>
<p>
If a page needs to load a lot of static images, that won&rsquo;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.</p>
<p>
The two pictures below are related to the images loaded from a remote location using a technique called <strong>lazy loading</strong>. Here you see the <em>bookshelf view</em> and <em>list view</em> of two applications on an iOS device.&nbsp;</p>
<p>
<a href="https://www.ibm.com/developerworks/community/blogs/mobileblog/resource/BLOGS_UPLOADED_IMAGES/apple-ios-example.png" style="width: 100%; display: inline-block;" target="_blank"><img alt="image" src="https://www.ibm.com/developerworks/community/blogs/mobileblog/resource/BLOGS_UPLOADED_IMAGES/apple-ios-example.png" style=" width:400px; display:block; margin: 0 auto;text-align: center;" /></a></p>
<p>
<strong>Lazy loading can help</strong></p>
<p>
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.</p>
<p>
<strong>How it works</strong></p>
<p>
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).</p>
<p>
Add the package below to your Xcode project:</p>
<p>
<a href="https://www.ibm.com/developerworks/community/blogs/mobileblog/resource/BLOGS_UPLOADED_IMAGES/xcode-project-view.png" style="width: 100%; display: inline-block;" target="_blank"><img alt="image" src="https://www.ibm.com/developerworks/community/blogs/mobileblog/resource/BLOGS_UPLOADED_IMAGES/xcode-project-view.png" style=" display:block; margin: 0 auto;text-align: center;" /></a></p>
<p>
&nbsp;</p>
<p>
Then add the code snippet below for getting the images loaded asynchronously:</p>
<p>
<a href="https://www.ibm.com/developerworks/community/blogs/mobileblog/resource/BLOGS_UPLOADED_IMAGES/lazy-load-code-sample.png" style="width: 100%; display: inline-block;" target="_blank"><img alt="image" src="https://www.ibm.com/developerworks/community/blogs/mobileblog/resource/BLOGS_UPLOADED_IMAGES/lazy-load-code-sample.png" style=" display:block; margin: 0 auto;text-align: center;" /></a></p>
<p>
&nbsp;</p>
<p>
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.</p>
<p>
I hope you find lazy loading helpful! Share your comments and your experiences with lazy loading below.</p>
<div dir="ltr">
<b><a href="https://www.ibm.com/developerworks/mydeveloperworks/blogs/mobileblog/resource/BLOGS_UPLOADED_IMAGES/rbtl.jpg" target="_blank"><img alt="image" src="https://dw1.s81c.com/developerworks/mydeveloperworks/blogs/mobileblog/resource/BLOGS_UPLOADED_IMAGES/rbtl.jpg" style="display: block; margin: 1em 1em 0pt 0pt; float: left; position: relative;" /></a>&nbsp;</b></div>
<div>
&nbsp;</div>
</div>
<p dir="ltr">
&nbsp;</p>
This blog post is contributed by&nbsp; 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...2013180urn:lsid:ibm.com:blogs:entries-77c96102-9a28-478c-b0fa-719551e9a4a3The Mobile Frontier2018-01-04T04:17:15-05:00