web-dev-qa-db-ja.com

画像のng-repeatでのプログレッシブロード、angular js

ページを下にスクロールしながら、コンテンツのプログレッシブロードを実装するにはどうすればよいですか？そうしないと、1000個の画像が同時に読み込まれます。

angularjslazy-loadingangularjs-ng-repeatprogressive
20
TheNickyYo

私のモバイルアプリはjQueryを使用していないため、他の人が投稿したngInfiniteScrollは使用したくありませんでした。

とにかく、この問題を解決する純粋なJavascriptで jsfiddle を見つけました。

[〜＃〜] html [〜＃〜]

<div id="fixed" when-scrolled="loadMore()">
    <ul>
        <li ng-repeat="i in items"></li>
    </ul>
</div>

JavaScript

function Main($scope) {
    $scope.items = [];
    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.Push({
                id: counter
            });
            counter += 10;
        }
    };
    $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, Elm, attr) {
        var raw = Elm[0];
        Elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

ソース： http://jsfiddle.net/vojtajina/U7Bz9/

17
TheNickyYo

infinite scrollingディレクティブを使用します。 ngInfiniteScroll

[〜＃〜] demo [〜＃〜]

[〜＃〜] html [〜＃〜]

<div ng-app='myApp' ng-controller='DemoController'>
  <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
    <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
  </div>
</div>

[〜＃〜] js [〜＃〜]

var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function($scope) {
  $scope.images = [1, 2, 3, 4, 5, 6, 7, 8];

  $scope.loadMore = function() {
    var last = $scope.images[$scope.images.length - 1];
    for(var i = 1; i <= 8; i++) {
      $scope.images.Push(last + i);
    }
  };
});
24
EpokK

NgInfiniteScrollとほぼ同じ機能を備えたモジュールを作成しましたが、jQueryには依存しません。ウィンドウのサイズ変更が考慮されます。 ngInfiniteScrollは私のアプリケーションで適切に動作していなかったので、自分でビルドしましたが、かなり軽量です。

https://github.com/Bram77/su-endless-scroll

0
Bram van Oploo

Ben Nadelには、ウィンドウとドキュメントのサイズ変更の両方を考慮に入れた、これに対する優れたソリューションがあります。また、ng-repeatノードごとの再描画も避けています。 チェックアウト 。

0
user2602152