Show spinner while image is load from server

ionic-v1
1

Hey guys,

i use the ion-scroll to display images from my server folder…
thats works already but i need a loading animation before the images completely loaded.

HTML:
<a class="item item-list-detail"> <ion-scroll direction="x"> <div id="imgContainer" ng-repeat="image in allImagesX" repeat-done="repeatDone()"> <img ng-src="{{image.src}}" class="image-list-thumb"/> </div> </ion-scroll> </a>

Controller:
$http.get("http:/.../getPics.php").then(function (response) { $scope.EntryData = response.data; $scope.allImagesX = [{ 'src' : 'http://...' + $scope.EntryData[0]["preview"] }, { 'src' : 'http://...' + $scope.EntryData[1]["preview"] }, { 'src' : '...' + $scope.EntryData[2]["preview"] }, { 'src' : '...' + $scope.EntryData[3]["preview"] }, { 'src' : '...' + $scope.EntryData[4]["preview"] }]; });

//example: ‘src’ : “http://www.example.com/folder/img1.jpg”

It would be great if anyone could post a solution for my problem or a workaround for example.

2

Sorry for pushing this but i really need help…

3

http://blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events/

4

Thats not working the unloaded event fires on start…

$scope.get_photo = function (numX) {
if ($scope.allImagesX) {
var request;
var progressBar;

                    request = new XMLHttpRequest();
                    request.onloadstart = showProgressBar;
                    request.onloaded = showImage(numX);
                    request.open("GET", $scope.allImagesX[numX], true);
                    request.send(null);
                } else {
                    return "Pic/undefined.png";
                }

            };
5

I found a quick way to load the spinner. In my case I am loading values imported from external APIs. Those values are returned from the services.js file…ie:

  return {
    all: function() {
      return items ;
    },

In the controller:
$scope.items = Items.all();

And then in the HTML page:

<div style="margin:15px;" ng-if="items.length=='0'">
  <p style="text-align:center;margin-top:100px;"><img ng-src="img/loading_circles.gif"></p>
</div>
<ion-list ng-if="items.length !='0'">
  <div > ....
      .....
  </div>
 </ion-list>

basically, the page loads the animated spinner gif while $scope.items.length == 0, when all the promises/api’s data returns from services…the items.length will be greater than 0…the ng-if for the spinner is evaluated, drops the spinner, then the ng-if in the next section of code kicks in.

I am certain you can adapt yours to do the same.

6

Hey rolinger,

thanks for your answer but that won’t work for me because the items length would be greater than 0 because the server path is in the scope array :confused:

How do you get the images from your server into the service?

sorry for my bad english :see_no_evil:

7

then set a pass back parameter at the end of your function. Something like:

$scope.allImagesLoaded = 0 ;

do your function to retrieve all files/images, when its completed, simply reset: $scope.allImagesLoaded = 1 ;

$scope.get_photo = function (numX) {
if ($scope.allImagesX) {
   var request;
   var progressBar;

   request = new XMLHttpRequest();
   request.onloadstart = showProgressBar;
   request.onloaded = showImage(numX);
   request.open("GET", $scope.allImagesX[numX], true);
   request.send(null);
   // $scope.allImagesLoaded = 1 ;  // or where ever it is actually finished at.
   } else {
   return "Pic/undefined.png";
   }
};

Then use the same type of HTML as above.

<div ng-if="allImagesLoaded == '0'"> <img ng-href="img/mySpinner.gif"> </div>
<ion-list ng-if="allImagesLoaded == '1'"> 
   ....do ...other...stuff...
</ion-list>
8

thats the Problem i don’t know where i can find the trigger of the ending action…

The images load bit by bit in the slider but i don’t know where i can put the gif and how i can handle the image actions (begin, end).