javascript - After refreshing page not all images are loaded -




im doing fullstack project java spring rest , angular/js giving me serious problems. have main page display 9 random products (games). make http call product info , path image (which saved on server). after getting imagepath make http call image. on backend works fine - both getting game info , getting image.

however after refreshing page not images shown - shows 1 out of 9, 5 , none. if dont refresh page , make same call again (by pressing button), images displayed. im pretty sure dont understand asynchronous calls. i'm trying figure out several days no success...

page:

<div ng-repeat="x in games track $index">                     <div class="col-sm-3 col-md-4" style="padding-bottom: 15px">                         <div class="thumbnail">                             <div class="caption">                                 <h3>{{ x.gamename }}</h3>                                 <img height="200" width="330" data-ng-src="{{ x.gameimage }}">                                 <p>genre: {{ x.genre }}</p>                                 <p>price: {{ x.price }}$</p>                                 <p>                                     <a class="btn btn-primary" id="details" href="gamedetails.html" ng-click="gotothegamedetails()">                                         <span class="glyphicon-info-sign glyphicon" /></span> details                                     </a>                                 </p>                             </div>                         </div>                     </div>                 </div>  

controller:

getrandomgames.getrandomgames($http).then( function(randomgames) {      angular.foreach( randomgames, function(game) {         var promise =  getimageforgame.getimageforgame(game.imagepath, $http, $location );         promise.then(             function(image){                 var filereader  = new filereader();                 filereader.addeventlistener("load", function () {                     game.gameimage = filereader.result;                 }, false);                 filereader.readasdataurl(image.data);                       },             function(){                 console.log("error");             }         );     });     $scope.games = randomgames; });  

service:

this.getimageforgame = function( imagepath, $http, $location ){      var absurl = $location.absurl().replace(/onlinegamestore.*$/, '');     var completeurl = absurl + "onlinegamestore/getgamephoto/" + imagepath;     return $http( {         method: 'get',         url: completeurl,         responsetype: "blob"     }); }; 

edit: i've noticed - after doing on website (for example selecting option select list) missing images loaded.





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -

python - Read npy file directly from S3 StreamingBody -