我有以下ng重复,从$http.post调用中获取数据,并将其存储到$scope.data中.
<div ng-repeat="key in [] | range:data.pages">
<div class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}">
<!-- some random stuff here -->
</div>
正常情况下,.pageBackground类将在屏幕上显示背景图像之前加载.直到背景图像实际加载后,我才想要显示,但是我无法弄清楚.
有没有人有什么建议？
解决方法
我不知道有没有一个真正的解决方案为您的问题.解决方法可能是使用
Image对象,如
this answer所述.例如,作为一个指令：
angular.module("yourModule").directive("showOnceBackgroundLoaded",[function () {
return {
restrict: "A",scope: false,link: function (scope,element,attributes) {
element.addClass("ng-hide");
var image = new Image();
image.onload = function () {
// the image must have been cached by the browser,so it should load quickly
scope.$apply(function () {
element.css({ backgroundImage: 'url("' + attributes.showOnceBackgroundLoaded + '")' });
element.removeClass("ng-hide");
});
};
image.src = attributes.showOnceBackgroundLoaded;
}
};
}]);
使用：
<div ng-repeat="key in [] | range:data.pages">
<div class="pageBackground" id="page_{{ (key+1) }}" show-once-background-loaded="/images/{{data.id}}/{{(key+1)}}.png">
<!-- some random stuff here -->
</div>