2

我目前正在开发一个使用 Cordova 的应用程序，我使用带有 Onsenui AngularJs 和库rn-lazy的框架

我的问题是我尝试制作我的图像加载列表，一次只加载 3 张图像，但它们都收费。如何确保图像的加载是由 3 of 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 回答
0

我在 AngularJS 控制器中使用 jQuery 来等待图像加载。以下链接将对您有所帮助。

加载图像的 jQuery 事件

于 2014-06-03T08:44:03.583 回答