TheNickyYo TheNickyYo - 1 year ago 174
AngularJS Question

Progressive loading in ng-repeat for images, angular js

I hope you can help, been all over the internet looking for solutions and cannot find..

Do any of you know how to implement progressive loaded of content as you scroll down the page? Otherwise 1000 images would load at the same times.

Thanks very much.

Answer Source

I didn't want to use JQuery infinite solution the other guy posted as my mobile app does not use JQuery.. Theres no point in loading JQuery just for this.

Anyhow i found a js fiddle in pure js that sovles this problem.


<div id="fixed" when-scrolled="loadMore()">
        <li ng-repeat="i in items"></li>


function Main($scope) {
    $scope.items = [];
    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
                id: counter
            counter += 10;

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) {


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download