javascript - 使用 Angular.js 预加载图像的最佳方法

Question

Angular 的 ng-src 保留以前的模型，直到它在内部预加载图像。我在每个页面上的横幅上使用不同的图像，当我切换路线时，我更改主视图，保留标题 View 不变，只需在拥有它时更改bannerUrl模型。

这会导致在加载新横幅图像时看到上一个横幅图像。

令我惊讶的是，目前还没有针对它的指令，但我想在尝试构建一个之前进行讨论。

我想做的是在自定义属性上拥有横幅模型。像:

<img preload-src="{{bannerUrl}}" ng-src="{{preloadedUrl}}">

然后$scope.watch中bannerUrl发生变化，一旦发生变化，首先将ng-src替换为loader spinner，然后创建临时img dom元素，从preload-src预加载图像，然后将其分配给preloadUrl。

例如，还需要考虑如何处理画廊的多个图像。

有人对此有任何意见吗？或者也许有人可以指出我现有的代码？

我在 github 上看到了使用背景图像的现有代码 - 但这对我不起作用，因为我需要动态高度/宽度，因为我的应用程序是响应式的，而我无法使用背景图像来做到这一点。

谢谢

Answer 1

指令上有 2 个 url 似乎有点过于复杂。我认为更好的是编写一个如下的指令:

<img ng-src="{{bannerUrl}}" spinner-on-load />

该指令可以监视 ng-src 并(例如)使用微调器设置 Visibility:false ，直到图像加载完毕。所以类似:

scope: {
  ngSrc: '='
},
link: function(scope, element) {
  element.on('load', function() {
    // Set visibility: true + remove spinner overlay
  });
  scope.$watch('ngSrc', function() {
    // Set visibility: false + inject temporary spinner overlay
  });
}

这样，元素的行为非常类似于带有 ng-src 属性的标准 img，只是附加了一些额外的行为。

http://jsfiddle.net/2CsfZ/47/