Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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


        }
    });
share|improve this question

I used jQuery in my AngularJS controller to wait image loading. The following links would help you.

jQuery event for images loaded

share|improve this answer

You may have better luck with this library: https://github.com/GeneralElectric/winchjs

Images are loaded based on their own awareness of if they are in the view portal of the screen. There is a lot less (or none) code needed to accomplish your task.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.