angularjs - Carga progresiva en ng-repetición para imágenes, js angular

lazy-loading angularjs-ng-repeat

Question

¿Cómo implemento la carga progresiva de contenido a medida que avanzas por la página? De lo contrario, se cargarían 1000 imágenes al mismo tiempo.

Answer 1

Ben Nadel tiene una buena solución para esto, donde toma en cuenta tanto el tamaño de la ventana como el del documento. También evita un repintado después de cada nodo de repetición ng. Échale un vistazo

Answer 2

He creado un módulo que hace aproximadamente lo mismo que ngInfiniteScroll, pero no depende de jQuery. Tiene en cuenta el cambio de tamaño de la ventana. ngInfiniteScroll no funcionó correctamente en mi aplicación, por lo que he creado la mía y es mucho más ligero.

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

Answer 3

No quería usar ngInfiniteScroll el otro tipo publicado, ya que mi aplicación móvil no usa jQuery, por lo que no tiene sentido cargarlo solo por esto.

De todos modos, encontré un jsfiddle con Javascript puro que resuelve este problema.

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

Fuente: jsfiddle

Answer 4

Utilice la directiva de desplazamiento infinito . 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);
    }
  };
});