zoukankan      html  css  js  c++  java
  • 滚屏加载

    滚屏加载
    
    另外一种可行的性能解决方案就是滚屏加载,又称”Endless Scrolling,“ “unpagination”,这是用于大量数据集显示的时候,
    又不想表格分页,所以一般放在页面最底部,当滚动屏幕到达页面底部的时候,就会尝试加载一个序列的数据集,追加在页面底部。
    在Angular社区有开源组件ngInfiniteScroll http:
    //binarymuse.github.io/ngInfiniteScroll/index.html实现滚屏加载。下面是官方Demo: HTML: <div ng-app='myApp' ng-controller='DemoController'> <div infinite-scroll='reddit.nextPage()' infinite-scroll-disabled='reddit.busy' infinite-scroll-distance='1'> <div ng-repeat='item in reddit.items'> <span class='score'>{{item.score}}</span> <span class='title'> <a ng-href='{{item.url}}' target='_blank'>{{item.title}}</a> </span> <small>by {{item.author}} - <a ng-href='http://reddit.com{{item.permalink}}' target='_blank'>{{item.num_comments}} comments</a> </small> <div style='clear: both;'></div> </div> <div ng-show='reddit.busy'>Loading data...</div> </div> </div> JavaScript: var myApp = angular.module('myApp', ['infinite-scroll']); myApp.controller('DemoController', ['$scope', 'Reddit', function($scope, Reddit) { $scope.reddit = new Reddit(); }]); // Reddit constructor function to encapsulate HTTP and pagination logic myApp.factory('Reddit', ['$http', function($http) { var Reddit = function() { this.items = []; this.busy = false; this.after = ''; }; Reddit.prototype.nextPage = function() { if (this.busy) return; this.busy = true; var url = 'http://api.reddit.com/hot?after=' + this.after + '&jsonp=JSON_CALLBACK'; $http.jsonp(url).success(function(data) { var items = data.data.children; for (var i = 0; i < items.length; i++) { this.items.push(items[i].data); } this.after = 't3_' + this.items[this.items.length - 1].id; this.busy = false; }.bind(this)); }; return Reddit; }]);
  • 相关阅读:
    jquery 实现 html5 placeholder 兼容password密码框
    php返回json的结果
    使用PHP读取远程文件
    Sharepoint 自定义字段
    Sharepoint 中新增 aspx页面,并在页面中新增web part
    【转】Sharepoint 2010 配置我的站点及BLOG
    JS 实现 Div 向上浮动
    UserProfile同步配置
    【转】Import User Profile Photos from Active Directory into SharePoint 2010
    Sharepoint 2010 SP1升级后 FIMSynchronizationService 服务无法开启
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6581002.html
Copyright © 2011-2022 走看看