Angularjs等到div background-image显示

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对象,如本答案中所述.例如作为指令:

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>

Answer 2

您可以延迟启动功能，直到图像加载。

  var img = new Image();
  img.onload = function(){
    loadData();
  };
  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';

然后ng-if="imageLoaded"在 html 中放入 an 并在loadData函数中将其设置为 true。