javascript – Angularjs等到div background-image显示

我有以下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>