webentwicklung-frage-antwort-db.com.de

Progressives Laden in ng-repeat für Bilder, Winkel js

Wie implementiere ich das progressive Laden von Inhalten, wenn Sie auf der Seite nach unten scrollen? Andernfalls würden 1000 Bilder gleichzeitig geladen.

angularjslazy-loadingangularjs-ng-repeatprogressive
20
TheNickyYo

Ich wollte ngInfiniteScroll nicht verwenden, da der andere Typ bereits gepostet wurde, da meine mobile App jQuery nicht verwendet.

Ich habe aber trotzdem ein jsfiddle mit reinem Javascript gefunden, das dieses Problem löst.

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

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

17
TheNickyYo

Verwenden Sie die Anweisung 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

Ich habe ein Modul erstellt, das ungefähr das gleiche wie ngInfiniteScroll macht, aber nicht von jQuery abhängig ist. Es berücksichtigt jedoch die Fenstergröße. ngInfiniteScroll hat in meiner Anwendung nicht richtig funktioniert, also habe ich meine eigene erstellt und es ist viel leichter.

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

0
Bram van Oploo

Ben Nadel hat dafür eine gute Lösung, indem er sowohl die Fenstergröße als auch die Dokumentgröße berücksichtigt. Er vermeidet auch eine Neulackierung nach jedem Wiederholungsknoten. Hör zu .

0
user2602152