2014-05-20 9 views
2

Je développe actuellement une application qui utilise Cordova, j'utilise le cadre avec Onsenui AngularJS et bibliothèque rn-lazyChargement des images Lazy + Onsenui + AngularJS

Mon problème est que j'essaie de faire ma liste des charges d'image, seules les charges 3 images à la fois et pourtant elles sont toutes payantes. Comment s'assurer que le chargement des images est effectué par 3 des 3 œuvres faites défiler le téléphone?

liste des modèles articles

<div ng-controller="QueryRequest"> 
    <div class="loader"> 
    CHARGEMENT 
    <ons-icon icon="refresh" spin="true"></ons-icon> 
    </div> 
    <div data-ng-init="ListItem();"> 
    <ons-list> 
     <ons-list-item class="topcoat-list__item__line-height ons-list-tweets" ng-repeat=" item in tweets "> 
     <ons-row class="list-tweet"> 
      <!-- <img ng-src="{{item.Tweet.media_url}}" class="img-response"> --> 
      <ons-col class="div-image-responsive image-list" ng-click="showLightBox(item.Tweet.media_url)" rn-lazy-background="item.Tweet.media_url" rn-lazy-loaded-class="loaded" rn-lazy-loader="#loader" rn-lazy-loading-class="loading"></ons-col> 
      <ons-col class="twitter-infos item tabs tabs-secondary tabs-icon-left" size="20"> 
      <ons-button class="btn-custom rating-poll" ng-click="rating('like', item.Tweet.id)" type="large--quiet"></ons-button> 
      </ons-col> 
     </ons-row> 
     </ons-list-item> 
    </ons-list> 
    <i class="icon-thumbs-up"></i> 
    <ons-button class="btn-custom rating-poll" ng-click="rating('dislike', item.Tweet.id)" type="large--quiet"></ons-button> 
    <i class="icon-thumbs-down"></i> 
    <ons-button class="btn-custom" ng-click="shareThis(item.Tweet.media_url)" type="large--quiet"></ons-button> 
    <i class="icon-share"></i> 
    <p class="tweeter"> 
     <a href="https://twitter.com/{{item.Tweet.username}}" pg-in-app-browser-link=""> 
     @{{item.Tweet.username}} 
     </a> 
    </p> 
    <rating-dialog class="{{modalType}}" show="modalShown" width="100%"></rating-dialog> 
    <p ng-bind-html="message">{{message}}</p> 
    </div> 
</div> 

contrôleur

App.controller('QueryRequest', function ($scope, $resource, storage, $stateParams, queryRequest, $window, $sce, $rootScope) { 
    "use strict"; 

    $scope.ListItem = function() { 

     var request = queryRequest.get(); 

     var tweets = storage.get("twitter_" + request); 

     if (tweets !== null) { 
      if (!storage.isObsolete()) { 
       $scope.tweets = tweets; 

      } else { 

       var Tweets = $resource(Clooder.getTweets(request)); 

       Tweets.get({}, function ($query) { 
        storage.set("twitter_" + request, $query.tweets, 0); 
        $scope.tweets = storage.get("twitter_" + request); 
        App.ajaxStop(); 
       }); 

      } 
     } else { 
      var Tweets = $resource(Clooder.getTweets(request)); 

      Tweets.get({}, function ($query) { 

       storage.set("twitter_" + request, $query.tweets, 0); 
       $scope.tweets = storage.get("twitter_" + request); 
       App.ajaxStop(); 
      }); 


     } 
    }); 

Répondre

1

Vous pouvez avoir plus de chance avec cette bibliothèque: https://github.com/GeneralElectric/winchjs

Les images sont chargées en fonction de leur propre prise de conscience si elles sont dans le portail de vue de l'écran. Il y a beaucoup moins de code (ou aucun) nécessaire pour accomplir votre tâche.

Questions connexes