javascript - Angularjs 等到 div 背景图像显示

Question

我有以下 ng-repeat 从 $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 类将在背景图像出现在屏幕上之前加载。在实际加载 background-image 之前，我不希望显示任何内容，但我一直无法弄清楚。

有人有什么建议吗？

Answer 1

我不确定您的问题是否有真正的解决方案。解决方法是使用 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>