Progressive ładowanie w NG-powtórz dla obrazów kątowe js

Question

Mam nadzieję, że może pomóc, był całym internecie szuka rozwiązań i nie mogę znaleźć ..

Czy ktoś z was wie jak wdrożyć progresywny załadowaniu zawartości jako przewijasz stronę w dół? W przeciwnym razie 1000 obrazów ładowałoby się w tym samym czasie.

Dziękuję bardzo.

Answer 1

nie chcę użyć jQuery roztworowi nieskończony othe r facet wysłany jako moja aplikacja mobilna nie korzysta z JQuery .. Nie ma sensu ładowanie JQuery tylko po to.

W każdym razie znalazłem js skrzypce w czystym js, który podsyca ten problem.

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

Źródło: http://jsfiddle.net/vojtajina/U7Bz9/

Answer 2

Użyj dyrektywy o nieskończonej przewijaniu . 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 ma dobre rozwiązanie dla tego, gdzie zaczyna się uwagę zarówno okna i zmiana rozmiaru dokumentu . Unika także ponownego malowania po każdym powtórzonym węźle ng. Check it out.

Answer 4

Stworzyłem moduł, który działa mniej więcej tak samo, jak ngInfiniteScroll, ale nie zależy od jQuery. Uwzględnia ona zmianę rozmiaru okna. Narzędzie ngInfiniteScroll nie działało poprawnie w mojej aplikacji, więc stworzyłem własne i jest dużo lżejsze.

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