ngRoute 如何添加loading

Question

想在每个页面图片加载完之前添加一个loading，等到图片加载完再显示页面，求思路

Answer 1

（1）如果图片是从后端请求获取到的，可以在请求完成后设置一个布尔值的状态，在页面里ngif判断去显示loading 或者图片；（2）如果图片是从function 来写入，可以 function load(){} 完成后，同（1）去做；（3）如果是html 里的image 标签，我不知道有事件可以判断image加载完成，如果有好的方式，请回复，共同学习。

Answer 2

可以考虑使用angular 的拦截器机制，实现全局的请求拦截//http loading Injectorapp.factory('httpLoadingInjector',['$rootScope','$q',function($rootScope,$q) {    var loadingInjector = {        request: function(config) {            $rootScope.httpLoading=true;            return config;        },        response: function (response) {            $rootScope.httpLoading=false;            if(response.status!=200){                console.log("Response-Error:",response);            }            return response;        },        responseError: function(err){            // console.log('responseError:' + angular.toJson(err,true));            // if(500 == err.status) {            //     // 处理各类自定义错误            //     //$rootScope.httpLoading=false;            //     msg("服务出问题拉,联系系统维护人员吧");            //     console.log(err);            // } else if(404 == err.status) {            //     msg("服务找不到了，请联系维护人员！")            // }else if(403  == err.status) {            //     msg("登录状态已过期，请重新登录！",function () {            //         logout();            //     });            // }else{            //     msg("服务找不到了，请联系维护人员！",function () {            //        // logout();            //     });            // }            $rootScope.httpLoading=false;            return $q.reject(err);        }    };    return loadingInjector;}]);最后在 app.config 中注入$httpProvider.interceptors.push('httpLoadingInjector');