angularjs - ng-repeat 中的渐进式加载图像，角度 js

Question

当您向下滚动页面时，如何实现内容的渐进式加载？否则将同时加载 1000 张图像。

Answer 1

使用无限滚动指令。ngInfiniteScroll

演示

---

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

Answer 2

我不想使用ngInfiniteScroll发布的其他人，因为我的移动应用程序不使用 jQuery，因此仅为此加载它是没有意义的。

无论如何，我找到了一个用纯 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/

Answer 3

Ben Nadel 对此有一个很好的解决方案，他同时考虑了窗口和文档的大小调整。他还避免了在每个 ng-repeat 节点之后重新绘制。检查出来。

Answer 4

我创建了一个与 ngInfiniteScroll 大致相同的模块，但不依赖于 jQuery。它确实考虑了窗口大小调整。ngInfiniteScroll 在我的应用程序中没有正常运行，所以我自己构建了它，而且它更轻。

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