延遲加載圖片+ Onsenui + angularJs

我目前正在開發使用科爾多瓦的應用程序，我用Onsenui AngularJs框架和庫rn-lazy 延遲加載圖片+ Onsenui + angularJs

我的問題是，我儘量讓我的圖片加載，只加載列表一次3張圖像，但他們都收費。如何確保通過3件作品中的3件來完成圖像加載滾動手機？

模板列表項

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

控制器

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(); 
      }); 


     } 
    });

來源

2014-05-20 Flug