Simple directive to lazy load images in your Ionic app

cordova, mobile, phonegap, ionic, angularjs, list

By Mitch , 15 May 2015

This article will show you how to use this great directive made by Vinicius Pavei which allows you to easily lazy load images in your Ionic app: https://github.com/paveisistemas/ionic-image-lazy-load

Introduction

A few days ago I encountered a problem with a scrollable list I was developing for my app. On my phone, the list would be very laggy while loading the images of the next items. For me, it was not possible to let this kind of bad user experience in my app.

So I started to look for a way to lazy load the images of my list and load only the images once they were going to be displayed on the screen. That's how I found this great directive that was really simple and had the basic things I needed. It worked great out of the box, but I needed some additional features to get the best out of it. So I made the changes I needed and sent a pull request to Vinicius, who was really nice and kindly merged it.

The example

So without further blabla, here is a working example of how you can use this awesome directive:

Note: I've deliberately set the image-lazy-distance-from-bottom-to-load to a negative value to show you how the loader looks like. Put to a positive value to load the image before it is displayed
Easy right? And the scrolling is now less laggy when images load, as the images don't load all at the same time! Neat!

Features I've added

For my list I needed to have my images loaded as background-images to be able to use background-size: cover; background-position: center; css styles. So I updated the code to do that. You can now lazy load your background-images too:

<div image-lazy-src="{{item.thumbnail}}" image-lazy-background-image="true"></div>

Great! But to achieve a great experience I needed to show a loader while the image was loading to inform the user that something was going on. So, I added a parameter to be able to specify an Ionic spinner (list here: http://ionicframework.com/docs/api/directive/ionSpinner/):

<div image-lazy-src="{{item.thumbnail}}" image-lazy-background-image="true" image-lazy-loader="lines" ></div>

This parameter adds this html code while your images are still loading, so you can easily add any style to it:

<div class="image-loader-container">
    <ion-spinner class="image-loader" icon="#spinnerStyle#"></ion-spinner>
</div>

OK, it starts to look pretty good, but, my images were loading right after they started to appear on screen. So it made the app look a little slow from the user perspective.


I added a parameter to be able trigger image loading before it actually appears on screen. This code tells the directive to load the image when it reaches 100 pixels below the bottom of your screen:

<div image-lazy-src="{{item.thumbnail}}" image-lazy-background-image="true" image-lazy-loader="lines" image-lazy-distance-from-bottom-to-load="100"></div>

Here we are! We have now a really neat experience with our list that is lazy loading our images. And that's we always want for our apps right? :)

Hope you guys liked it and will take advantage of it. If you have any suggestion, comment or question, don't hesitate to drop a line in the comment section bellow. I'll be happy to answer.

May code be with you.