caricamento progressivo in ng-repeat per le immagini, js angolari

Question

Spero che tu possa aiutare, stato tutto su internet alla ricerca di soluzioni e non può trovare ..

Qualcuno di voi sa come implementare progressiva caricato di contenuti come scorri la pagina? Altrimenti 1000 immagini verrebbero caricate allo stesso tempo.

Grazie mille.

Answer 1

non volevo usare la soluzione infinita JQuery il Othe Il ragazzo è stato postato mentre la mia app mobile non utilizza JQuery. Non ha senso caricare JQuery solo per questo.

In ogni caso ho trovato un js fiddle in js puro che sovrasta questo 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); 
      } 
     }); 
    }; 
}); 

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

Answer 2

Utilizzare scorrimento infinito direttiva. 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 ha una buona soluzione per questo, in cui si prende in considerazione sia della finestra e del documento di ridimensionamento . Evita anche un ridisegno dopo ogni nodo ripetizione ng. Check it out.

Answer 4

Ho creato un modulo che equivale all'incirca a ngInfiniteScroll, ma non dipende da jQuery. Prende in considerazione il ridimensionamento della finestra. ngInfiniteScroll non funzionava correttamente nella mia applicazione, quindi ho creato il mio ed è molto più leggero.

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