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

Question

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

这导致在加载新的横幅图像时看到先前的横幅图像。

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

我想做的是在自定义属性上设置横幅模型。喜欢：

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

然后$ scope.watch更改bannerUrl，并在更改后立即用loader spinner替换ng-src，然后创建临时img
dom元素，从preload-src预加载图像，然后将其关联到preloadUrl。

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

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

我已经在github上看到了使用background-image的现有代码-
但这对我不起作用，因为我的应用程序具有响应能力，因此我需要动态的高度/宽度，而我无法使用background-image来实现。

谢谢

Answer 1

在指令上具有2个url似乎有点复杂。我认为更好的是编写一个像这样的指令：

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

并且该指令可以ng-src使用微调器监视和（例如）设置是否可见性：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/