逐行加载在NG-重复图像，角度JS [英] 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..

做任何你知道如何实现逐步加载的内容，你向下滚动页面？否则，1000年的图像将加载在同一时间。

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.

非常感谢。

推荐答案

我不想使用jQuery无限的解决方案张贴在自己的移动应用程序不使用JQuery ..其他的家伙世界上没有点加载的JQuery只为这

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.

总之我在sovles这个问题的纯JS发现一个JS提琴。

Anyhow i found a js fiddle in pure js that sovles this 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);
            }
        });
    };
});

来源： http://jsfiddle.net/vojtajina/U7Bz9/

这篇关于逐行加载在NG-重复图像，角度JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！