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

Question

ich Ihnen helfen kann hoffen, alle über das Internet seit Lösungen suchen und nicht finden können ..

Hat jemand von euch wissen, wie fortschrittlich zu implementieren geladen inhaltlich als scrollst du die Seite runter? Ansonsten würden 1000 Bilder gleichzeitig geladen werden.

Vielen Dank.

Answer 1

Ich wollte nicht JQuery unendliche Lösung die othe verwenden r guy gepostet, da meine mobile app nicht JQuery verwendet .. Theres keinen Punkt in JQuery nur dafür laden.

Irgendwie fand ich eine js Geige in reinen js, die 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/

Answer 2

Verwenden Sie unendlich scrollen Direktive. 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); 
    } 
    }; 
}); 

Answer 3

Ben Nadel hat eine gute Lösung für dieses Problem, wo er in Rechnung beide Fenster und Dokument Redimensionierung nimmt . Er vermeidet auch ein Repaint nach jedem ng-repeat-Knoten. Check it out.

Answer 4

Ich habe ein Modul erstellt, das in etwa dem gleichen wie ngInfiniteScroll entspricht, aber nicht von jQuery abhängig ist. Es berücksichtigt die Fenstergrößenanpassung. ngInfiniteScroll hat in meiner Anwendung nicht richtig funktioniert, deshalb habe ich meine eigene erstellt und es ist viel leichter.

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