Question

我目前正在开发一个使用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();
            });


        }
    });

Answer 1

您可以更好地使用此库：https://github.com/GeneralElectric/winchjs

图像是根据他们自己是否在屏幕的视图门户中的意识加载的。完成任务所需的代码少得多（或没有代码）。

Answer 2

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

jQuery event for images loaded

延迟加载图片+ Onsenui + angularJs

2 个答案: