How to Setup Default Loading Image before real product image loads in Ionic applications?

Introduction: This article applies to those fellow iOS10 app developers who are using Ionic/Cordova framework. I am going to explain the problem of setup loading image. which I faced during development of an ionic app using Microsoft visual studio and Mac OS. Hope this will help to mobile app development community or individual Ionic app developer.

Problem: I am working in Ionic (using visual studio tools for apache Cordova) In My Ionic application. Suppose, I need to display default loading image before actual product image loads. Because my page was not looking good until my actual product images are not loaded fully in the Ionic mobile app.

Screenshot of default loading image


1)  When My view call by default all the product Images set with default loading image.

2) Call Web services for actual data.

3) Remain loading image path as default path until new image load fully.

4) After Fully load the product image will Replace with default loading image.

Solution: Let’s, we understand, how to program for the setting up the default loading image or GIF file. We have to use a directive to load actual product image when it will fully load. Here I describe the step by step solution for the iOS app program.

Step 1: First of all, I have to set default.gif processing image in src and set actual product Image using keyword new-image which is my directive.

<div class=”image-box”><img class=”item-thumbnail” data-rel=”external” src=”img/default.gif” new-image=”{{products

[$index].ImageURL}}” /></div>

<img class=”item-thumbnail” data-rel=”external” src=”img/default.gif” new-image=”{{products[$index].ImageURL}}” /></div>


Step 2: Now, I have to create a directive for load image under /www/js/directive.js and Name directive as newImage because I am using it as “new-image” in Html.

You can direct copy the code for the directive.js file. Click Here

I hope this tiny help for the setup the default processing GIF image before the product image loads will work for yours. You can share this blog with your friends who are working in Ionic hybrid app development. Thanks.

By | 2017-07-03T17:29:32+00:00 November 28th, 2016|Cross Platform App Development, How To, Ionic Apps(cross platform)|