Javascript 优化angularjs函数在页面上加载图像

Javascript 优化angularjs函数在页面上加载图像,javascript,angularjs,Javascript,Angularjs,我的dataContext对象中有两个angularjs函数,可以从webapi接收数据,如下所示 (function () { 'use strict'; var serviceId = 'datacontext'; angular.module('app').factory(serviceId, ['common', datacontext]); function datacontext(common) { var service = { getAllT

我的dataContext对象中有两个angularjs函数,可以从webapi接收数据,如下所示

(function () {
'use strict';

var serviceId = 'datacontext';
angular.module('app').factory(serviceId,
    ['common', datacontext]);

function datacontext(common) {
    var service = {

        getAllTagsByHttp: getAllTagsByHttp,
        getBlogPostsByHttp: getBlogPostsByHttp,
        getAllUserPicByHttp: getAllUserPicByHttp

    };
    return service;

    function getAllTagsByHttp() {
       return common.$http.get('/api/TagApi/alltags');         
    }

    function getBlogPostsByHttp() {
        return common.$http.get('/api/BlogPostApi/AllBlogPosts');
    }

    function getAllUserPicByHttp() {
        return common.$http.get('/api/BlogPostApi/AllUserPic');
    }   
}})();
我有一个angularjs控制器,它从datacontext调用这些api函数来接收要显示给用户的信息。首先调用getblogPost函数,因为下一个函数需要此函数中的数据进行操作。第二个函数对第一个函数的数据进行比较,以向用户显示img源。我遇到的问题是,第二个函数需要几秒钟的时间来接收数据并完成其操作。发送回的数据量只有几条记录。是否可以对控制器或数据上下文对象进行任何改进以减少时间或改进代码

(function () {
'use strict';
var controllerId = 'search';
angular
    .module('app')
    .controller(controllerId, ['common','datacontext', search]);

function search(common, datacontext) {
    var getLogFn = common.logger.getLogFn;
    var log = getLogFn(controllerId);


    var vm = this;
    vm.title = 'search';
    vm.picData = [];

    activate();

    function activate() {
        var promises = [getBlogPosts(), getUserPicData(), getUserPicUrl()];
        common.activateController(promises, controllerId)
            .then(function () { log('Search View'); });
    }

    function getBlogPosts() {
        datacontext.getBlogPostsByHttp().then(function (response) {
            vm.data = response.data;               
        });
    }
    function getUserPicData() {
        datacontext.getAllUserPicByHttp().then(function (response) {
            vm.picData = response.data;

            for (var i = 0; vm.data.length > i; i++) {
                for (var x = 0; vm.picData.length > x; x++) {
                    if (vm.data[i].UserName == vm.picData[x].UserName) {
                        vm.data[i].PictureUrl = vm.picData[x].PictureUrl;
                       // console.log(vm.data[i].PictureUrl);
                        break;
                    }

                }                   
           }
        });
    }

   function getUserPicUrl(username) {
        getUserPicData();
        for (var i = 0; vm.picData.length < i; i++) {
            if (vm.picData[i].UserName === username) {
                return vm.picData[i].PictureUrl;
                }
            }
            return "not found";      
    }
}})();

如果您可以控制后端API,请在后端进行过滤。@DhanaKrishnasamy,以便在客户端减少处理