Javascript CSS动画冻结

在等待angular应用程序通过ajax加载所需的所有内容时，我在内容上方的较暗层上显示了一个加载程序

我正在使用这个SVG，它包括一个animateTransform：

ajax调用为4次，加载程序在某个点冻结，一旦调用完成，动画将再次启动

这是角度部分：

<script type="text/javascript">
var myApp = angular
    .module('appName', [], function($interpolateProvider) {
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    }
    .service('dataService', function($http) {
        function getInfos() {
            return $http.get(currentUrl + '/infos');
        }
        function getCountries() {
            return $http.get(currentUrl + '/countries');
        }
        function getCatgeories() {
            return $http.get(currentUrl + '/categories');
        }
        function getPrices() {
            return $http.get(currentUrl + '/prices');
        }
        return {
            getInfos: getInfos,
            getCountries: getCountries,
            getCatgeories: getCatgeories,
            getPrices: getPrices
        };
    })
    .controller('appNameController', function($scope, dataService) {
        $scope._loading = {
            start: function() {
                if($('.loader').hasClass('off')){
                    $('.loader').removeClass('off');
                }
            },
            stop: function() {
                if(!$('.loader').hasClass('off')){
                    $('.loader').addClass('off');
                }
            }
        };
        $scope._loading.start();
        $scope.checkPageLoader = function() {
            if($scope.hidePageLoader == 4) {
                    $('#loaderText').html('<span>App is Ready!</span>');
                    $scope._loading.stop();
            }
        };
        $scope.hidePageLoader = 0;
        $scope.getInfos = function() {
            dataService.getInfos().then(function(res) {
                $scope.infos = res.data;
                $scope.hidePageLoader += 1;
                $('#loaderText').append('<span><i class="icon-check"></i>Infos</span>');
                $scope.checkPageLoader();
            });
        };
        dataService.getCatgeories().then(function(res) {
            $scope.categories = res.data;
            $scope.hidePageLoader += 1;
            $('#loaderText').append('<span><i class="icon-check"></i>Categories</span>');
            $scope.checkPageLoader();
        });
        dataService.getPrices().then(function(res) {
            $scope.prices = res.data;
            $scope.hidePageLoader += 1;
            $('#loaderText').append('<span><i class="icon-check"></i>Prices</span>');
            $scope.checkPageLoader();
        });
        $scope.getCountries = function() {
            dataService.getCountries().then(function(res) {
                $scope.countries = res.data;
                $scope.hidePageLoader += 1;
                $('#loaderText').append('<span><i class="icon-check"></i>Countries</span>');
                $scope.checkPageLoader();
            });
        };
        angular.element(document).ready(function () {
            $scope._loading.start();
            $scope.getInfos();
            $scope.getCountries();
            /* $scope.priceValues(); */
        });
    });
</script>

var myApp=角度
.module（'appName'，[]，函数（$interpolateProvider）{
$interpolateProvider.startSymbol（“”）；
}
.service（'dataService'，函数（$http）{
函数getInfos（）{
返回$http.get（currentUrl+'/infos'）；
}
职能（国家）{
返回$http.get（currentUrl+'/countries'）；
}
函数getCatgeories（）{
返回$http.get（currentUrl+'/categories'）；
}
函数getPrices（）{
返回$http.get（currentUrl+'/prices'）；
}
返回{
getInfos:getInfos，
getCountries:getCountries，
getCatgeories:getCatgeories，
getPrices:getPrices
};
})
.controller（'appNameController'，函数（$scope，dataService）{
$scope.\u加载={
开始：函数（）{
if（$（'.loader'）.hasClass（'off'））{
$（'.loader'）.removeClass（'off'）；
}
},
停止：函数（）{
if（！$（'.loader'）.hasClass（'off'））{
$（'.loader'）.addClass（'off'）；
}
}
};
$scope._加载.start（）；
$scope.checkPageLoader=函数（）{
如果（$scope.hidePageLoader==4）{
$（'loaderText'）.html（'App is Ready！'）；
$scope._加载.stop（）；
}
};
$scope.hidePageLoader=0；
$scope.getInfos=function（）{
dataService.getInfos（）.then（函数（res）{
$scope.infos=res.data；
$scope.hidePageLoader+=1；
$（'#loaderText'）。追加（'Infos'）；
$scope.checkPageLoader（）；
});
};
dataService.getCatgeories（）.then（函数（res）{
$scope.categories=res.data；
$scope.hidePageLoader+=1；
$（'#loaderText'）。追加（'Categories'）；
$scope.checkPageLoader（）；
});
dataService.getPrices（）.then（函数（res）{
$scope.prices=res.data；
$scope.hidePageLoader+=1；
$（'#loaderText'）。追加（'Prices'）；
$scope.checkPageLoader（）；
});
$scope.getCountries=function（）{
dataService.getCountries（）.then（函数（res）{
$scope.countries=资源数据；
$scope.hidePageLoader+=1；
$（'#loaderText'）。追加（'Countries'）；
$scope.checkPageLoader（）；
});
};
angular.element（文档）.ready（函数（）{
$scope._加载.start（）；
$scope.getInfos（）；
$scope.getCountries（）；
/*$scope.priceValues（）*/
});
});

---

知道为什么会发生这种情况吗？

您的代码不正确：

priceValues

不存在

尝试使用

$q等待所有承诺。all

：

.controller('appNameController', function($scope, $q, dataService) {
    $scope._loading = {
        start: function() {
            if($('.loader').hasClass('off')){
                $('.loader').removeClass('off');
            }
        },
        stop: function() {
            if(!$('.loader').hasClass('off')){
                $('.loader').addClass('off');
            }
        }
    };
    $scope.getInfos = function() {
        return dataService.getInfos().then(function(res) {
            $scope.infos = res.data;
        });
    };
    $scope.getCatgeories= function() {
        return dataService.getCatgeories().then(function(res) {
            $scope.categories = res.data;
        });
    };
    $scope.getPrices= function() {
        return dataService.getPrices().then(function(res) {
            $scope.prices = res.data;
        });
    };
    $scope.getCountries = function() {
        return dataService.getCountries().then(function(res) {
            $scope.countries = res.data;
        });
    };
    $scope._loading.start();
    $q.all([
        $scope.getInfos(),
        $scope.getPrices(),
        $scope.getCountries()
    ]).then(function() {
        $('#loaderText').html('<span>App is Ready!</span>');
        $scope._loading.stop();
    });
});

.controller（'appNameController'，函数（$scope，$q，dataService）{
$scope.\u加载={
开始：函数（）{
if（$（'.loader'）.hasClass（'off'））{
$（'.loader'）.removeClass（'off'）；
}
},
停止：函数（）{
if（！$（'.loader'）.hasClass（'off'））{
$（'.loader'）.addClass（'off'）；
}
}
};
$scope.getInfos=function（）{
返回dataService.getInfos（）.then（函数（res）{
$scope.infos=res.data；
});
};
$scope.getCatgeories=function（）{
返回dataService.getCatgeories（）.then（函数（res）{
$scope.categories=res.data；
});
};
$scope.getPrices=function（）{
返回dataService.getPrices（）.then（函数（res）{
$scope.prices=res.data；
});
};
$scope.getCountries=function（）{
返回dataService.getCountries（）.then（函数（res）{
$scope.countries=资源数据；
});
};
$scope._加载.start（）；
$q.all([
$scope.getInfos（），
$scope.getPrices（），
$scope.getCountries（）
]).然后（函数（）{
$（'loaderText'）.html（'App is Ready！'）；
$scope._加载.stop（）；
});
});

我最终从SVG的嵌入式动画转到了CSS动画，始终在SVG上

SVG代码现在是：

<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="#fff" stop-opacity="0" offset="0%"/><stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/><stop stop-color="#fff" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"></path><circle fill="#fff" cx="36" cy="18" r="1"></circle></g></g></svg>

这样，动画是平滑的，在ajax调用期间不会冻结

---

希望这能帮助一些人。

问题不在于angular，我在console中没有错误，我把所有日期都处理得很好。只是CSS动画同时冻结了…加上$scope.priceValues（）；不再使用了，我评论说这是一个常见的情况，他们都使用主线程。你可以尝试看看一个更简单的非svg加载程序是否可以使用css转换，或者将你的请求从主线程移动到工作线程，但我认为这太过分了。或者如果它有点不稳定，就接受它。我读了一些类似的东西在这里，关于使用另一个线程，但我不知道如何实现它。。

<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="#fff" stop-opacity="0" offset="0%"/><stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/><stop stop-color="#fff" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><g transform="translate(1 1)"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"></path><circle fill="#fff" cx="36" cy="18" r="1"></circle></g></g></svg>

#pageLoader {
    animation: spin 1s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}