在 ng-repeat 中逐步加载图像,角度 js [英] Progressive loading in ng-repeat for images, angular js
本文介绍了在 ng-repeat 中逐步加载图像,角度 js的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在向下滚动页面时实现内容的渐进式加载?否则会同时加载 1000 张图片.
解决方案
我不想使用 ngInfiniteScroll
另一个人发布的因为我的移动应用程序不使用 jQuery 所以没有意义加载它只是为了这个.
无论如何,我找到了一个 jsfiddle 用纯 Javascript 解决了这个问题.
HTML
<ul><li ng-repeat="i in items"></li>
JavaScript
function Main($scope) {$scope.items = [];无功计数器 = 0;$scope.loadMore = function() {for (var i = 0; i <5; i++) {$scope.items.push({编号:计数器});计数器 += 10;}};$scope.loadMore();}angular.module('scroll', []).directive('whenScrolled', function() {返回函数(范围,榆树,属性){var raw = elm[0];elm.bind('scroll', function() {if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {scope.$apply(attr.whenScrolled);}});};});
来源:http://jsfiddle.net/vojtajina/U7Bz9/
How do I implement progressive loading of content as you scroll down the page? Otherwise 1000 images would load at the same time.
解决方案
I didn't want to use ngInfiniteScroll
the other guy posted as my mobile app does not use jQuery so there is no point in loading it just for this.
Anyhow, I found a jsfiddle with pure Javascript that solves 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);
}
});
};
});
Source: http://jsfiddle.net/vojtajina/U7Bz9/
这篇关于在 ng-repeat 中逐步加载图像,角度 js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文