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

By: Mayur
Updated: November 28, 2016 | Technology: Cross Platform App Development
How to Setup Default Loading Image before real product image loads in Ionic applications?

Introduction

Problem

Solution

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 the 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 a 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.

program processing image gif in ios mobile appScreenshot of default loading image

Example:

  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. 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 the actual product image when it will fully load. Here I describe the step by step solution for the iOS app program.

  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.
    setup default loading image in ios app
Copy to Clipboard
  1. 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.
    how to program for setup processing image before product image loads in ios app

    You can directly 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.