I am currently developing an application that uses Cordova, I use the framework with Onsenui AngularJs and library rn-lazy
My problem is that I try to make my list of image loads, only loads 3 images at once out yet they all charge. How to ensure that the loading of images is done by 3 of 3 works scroll the phone ?
Template list items
<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>
Controller
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();
});
}
});
