Show loading animation for slowscript using AngularJS?

前端未结

关注

 8  506

In angularjs 1.2 operations like filtering an ng-repeat with many rows (>2,000 rows) can become quite slow (>1 sec).
I know I can optimize execution times u

相关标签:

8条回答

天命终不由人

2020-12-24 12:51

You could run the filter in another thread using WebWorkers, so your angularjs page won't block.

If you don't use webworkers the browser could get a javascript execution timeout and stop your angular app completely and even if you don't get any timeout your application freezes until the calculation is done.

UPDATE 23.04.14

I've seen a major performance improvement in a large scale project using scalyr and bindonce

0 讨论(0)
发布评论:

提交评论
- 加载中...

春和景丽

2020-12-24 12:52

You can use this code taken from this url: http://www.directiv.es/angular-loading-bar

there you can find a workin demo also.

Here is thei code:

    <!DOCTYPE html>
<html ng-app="APP">
<head>
    <meta charset="UTF-8">
    <title>angular-loading-bar example</title>
    <link rel="stylesheet" type="text/css" href="/application/html/js/chieffancypants/angular-loading-bar/loading-bar.min.css"/>
    <style>
        body{
            padding:25px;
        }
    </style>
</head>
<body ng-controller="ExampleController">
    <button id="reloader" ng-click="getUsers()">Reload</button>
    <ul ng-repeat="person in data">
        <li>{{person.lname}}, {{person.fname}}</li> 
    </ul>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>
    <script src="/application/html/js/chieffancypants/angular-loading-bar/loading-bar.min.js"></script>
    <script>
    angular.module('APP', ['chieffancypants.loadingBar', 'ngAnimate']).
    controller("ExampleController",['$scope','$http',function($scope,$http){
        $scope.getUsers = function(){
            $scope.data=[];
            var url = "http://www.filltext.com/?rows=10&fname={firstName}&lname={lastName}&delay=3&callback=JSON_CALLBACK"
            $http.jsonp(url).success(function(data){
                $scope.data=data;
            })
        }
        $scope.getUsers()

    }])
    </script>
</body>
</html>

How do I use it?

Install it via npm or bower

$ npm install angular-loading-bar
$ bower install angular-loading-bar

To use, simply include it as a dependency in your app and you're done!

angular.module('myApp', ['angular-loading-bar'])

0 讨论(0)

上一页 1 2