web-dev-qa-db-fra.com

Chargement progressif dans ng-repeat pour les images, js angulaire

Comment implémenter le chargement progressif du contenu lorsque vous faites défiler la page? Sinon, 1000 images seraient chargées en même temps.

angularjslazy-loadingangularjs-ng-repeatprogressive
20
TheNickyYo

Je ne voulais pas utiliser ngInfiniteScroll l'autre gars posté car mon application mobile n'utilise pas jQuery, il est donc inutile de la charger pour cela.

En tout cas, j'ai trouvé un jsfiddle avec du Javascript pur qui résout ce problème.

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

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

17
TheNickyYo

Utilisez la directive infinite scrolling. ngInfiniteScroll

D&EACUTE;MO

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

J'ai créé un module qui fait à peu près la même chose que ngInfiniteScroll, mais ne dépend pas de jQuery. Il prend en compte le redimensionnement de la fenêtre. ngInfiniteScroll ne fonctionnait pas correctement dans mon application, j'ai donc construit la mienne et elle est beaucoup plus légère.

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

0
Bram van Oploo

Ben Nadel a une bonne solution pour cela, où il prend en compte le redimensionnement de la fenêtre et du document. Il évite également de repeindre après chaque nœud ng-repeat. Vérifiez-le .

0
user2602152