在ng-repeat中逐行加载图像，角度为js

How do I implement progressive loading of content as you scroll down the page? Otherwise 1000 images would load at the same time.

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

4 个解决方案

#1

Use infinite scrolling directive. ngInfiniteScroll

使用无限滚动指令。 ngInfiniteScroll

DEMO

DEMO

---

HTML

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

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

#2

I didn't want to use ngInfiniteScroll the other guy posted as my mobile app does not use jQuery so there is no point in loading it just for this.

我不想使用ngInfiniteScroll发布的另一个人因为我的移动应用程序不使用jQuery所以没有必要加载它只是为了这个。

Anyhow, I found a jsfiddle with pure Javascript that solves this problem.

无论如何，我发现了一个用纯Javascript解决这个问题的jsfiddle。

HTML

HTML

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

JavaScript

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

Source: http://jsfiddle.net/vojtajina/U7Bz9/

资料来源：http：//jsfiddle.net/vojtajina/U7Bz9/

#3

Ben Nadel has a good solution for this, where he takes in account both window and document resizing. He also avoids a repaint after every ng-repeat node. Check it out.

Ben Nadel有一个很好的解决方案，他考虑了窗口和文档大小调整。他还避免了每个ng-repeat节点后的重画。一探究竟。

#4

I've created a module that does roughly the same as ngInfiniteScroll, but does not depend on jQuery. It does take window resizing into account. ngInfiniteScroll wasn't performing properly in my application so I've build my own and it's a lot lighter.

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

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

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