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>

Answer 2

在此寻找解决方案：

How can I tell when a CSS background image has loaded? Is an event fired?

您所做的是创建一个加载相同图像的隐形合作伙伴元素。当且仅当该图像已被加载（onload事件）时，您才会显示其他元素，例如：

<div ng-repeat="key in [] | range:data.pages" ng-init="_imageLoaded={}">
    <div ng-show="_imageLoaded[$index]" class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}">
    <img ng-show="false" src="/images/{{data.id}}/{{(key+1)}}.png" onload="_imageLoaded[$index] = true;" />
    <!-- some random stuff here -->
</div>

Answer 3

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

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

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

Answer 4

这是一个将图像作为背景嵌入的指令，等待图像加载后显示。您可以根据需要在“mysrc”参数中包含变量以生成不同的图像（例如在ng-repeat中）。

angular.module('foo', [])
  .directive('myPageBackground', function() {
    return {
      scope: {
        key: '=', // used for ID of the element; if you set the ID externally to the directive you could omit this
        mysrc: '=' // used for the URL of the desired background image
      },
      template: '<div ng-show="showMe" class="pageBackground" id="page_{{key}}" ng-style="{\'background-image\':\'url({{mysrc}})\'}"></div>',
      link: function(scope) {
        var img = new Image();
        img.onload = function() {
          scope.showMe = true;
          scope.$apply();
        };
        img.src = scope.mysrc;
      }
    }
  });

.pageBackground {
  width: 200px; height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="foo">
  <!-- Done with hardcoded values here, just for demo: -->
  <div my-page-background key="'1'" mysrc="'http://placehold.it/200x200'"></div>
  <div my-page-background key="'2'" mysrc="'http://placehold.it/150x150'"></div>
  <div my-page-background key="'3'" mysrc="'http://placehold.it/100x100'"></div>
</div>

Answer 5

如果您总是使用相同的class="pageBackground"，那么您的背景图片始终是相同的。您可以将其加载到隐藏图像中，以便浏览器对其进行缓存：

<img src="url" style="display:none;"/>

或者在页面加载时使用javascript预加载：

var img = new Image();
img.src = 'some url';

我相信，该帖子是通过用户互动触发的，这一点在页面加载后肯定会发生，因此图片已经位于浏览器中，当您应用class="pageBackground"

时它会立即显示

希望这有帮助！

Answer 6

您可以使用ngSrc指令而不是div。此外，您可以尝试使用一个很小的延迟加载图像库，例如ng-lazy-img。

我希望有所帮助！

Answer 7

这是一个使用Image对象的功能齐全的示例。

function AppCtrl($scope) {
  $scope.images = [{
    src: 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'
  }, {
    src: 'https://farm9.staticflickr.com/8455/8048926748_1bc624e5c9_d.jpg'
  }];
  angular.forEach($scope.images, function(image) {
    var img = new Image();
    img.onload = function() {
      $scope.$apply(function() {
        image.loadedSrc = image.src;
      });
    };
    img.src = image.src;
  });
}

.hasSrc {
  color: purple;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="AppCtrl">
    <div ng-repeat="image in images" ng-class="{ hasSrc: !!image.loadedSrc }" style="background-image: url({{image.loadedSrc}})">
      <h2>THIS IS SOME TEXT BEING USED</h2>
      <p>
        This text is being used for illustration purposes only.
      </p>
    </div>
  </div>
</div>

应该很容易使其适应您的目的。

Answer 8

你可以从有角度的承诺中获得帮助。如果图像按照承诺加载，则视图不会。

您可能已经查看了这个链接。

preloading-images-in-angularjs-with-promises

由于

Angularjs等到div background-image显示

8 个答案: