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

Introduction

This article applies to fellow iOS10 app developers who are using the Ionic/Cordova framework.

I am going to explain the problem of setup loading images.

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 developers.

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 the actual product image loads.

Because my page was not looking good until my actual product images were loaded fully in the Ionic mobile app.

Screenshot of default loading image

Example:

1. When My View calls by default all the product Images are set with default loading images.
2. Call Web services for actual data.
3. Remain to load the image path as the default path until the new image loads fully.
4. Fully load the product image will be replaced with the default loading image.

Solution

Let’s, 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 the default.gif processing image in src and set the actual product Image using the 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>

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

   .directive('newImage', ['$timeout', '$ionicPopup', '$compile', 'Utils', function ($timeout, $ionicPopup, $compile, Utils) {
       return {
           link: function ($scope, element, attrs) {
               function LoadNewImage(url) {
                   var Img = new Image();
                   Img.onload = function () {
                       $timeout(function () {
                           element.attr('src', url);
                       });
                   }
                   Img.src = url;
               }
               attrs.$observe('newImage', function (newValue) {
                   if (newValue) {
                       LoadNewImage(newValue);
                   }
               });
           }
       }
   }])

   You can directly copy the code for the directive.js file.

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