2

私は現在、Cordova を使用するアプリケーションを開発しています。Onsenui AngularJs およびライブラリrn-lazyでフレームワークを使用しています。

私の問題は、画像ロードのリストを作成しようとして、一度に 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();
            });


        }
    });
4

2 に答える 2

1

このライブラリで運が良くなるかもしれません: https://github.com/GeneralElectric/winchjs

画像は、画面のビュー ポータルにあるかどうかの認識に基づいて読み込まれます。タスクを達成するために必要なコードは、はるかに少ない (またはまったくない) ものです。

于 2015-09-22T14:30:01.113 に答える