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

Question

Angular的ng-src保留了之前的模型,直到它在内部预加载图像.我在每个页面上为横幅使用不同的图像,当我切换路径时,我改变主视图,保持标题视图不变,只是在我拥有它时更改bannerUrl模型.

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

我很惊讶它还没有指令,但我想在尝试构建之前进行讨论.

我想要做的是我认为自定义属性上有横幅模型.喜欢:

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

然后$ scope.watch for bannerUrl更改,并且一改变,首先用loader spinner替换ng-src,然后创建temproary img dom元素,从preload-src预加载图像,然后将其分配到preloadUrl.

例如,需要考虑如何为画廊处理多个图像.

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

我已经在github上看到了使用背景图像的现有代码 - 但这对我不起作用,因为我需要动态高度/宽度,因为我的应用程序是响应式的,我不能用背景图像来做.

谢谢

Answer 1

指令上有2个网址似乎过于复杂.我认为更好的是编写一个类似于以下内容的指令:

<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/

Answer 2

如果有人有兴趣,这是我的最终解决方案:我使用twitter bootstrap.所以在所有图像中添加了"淡入淡出"类,只是在指令中切换类"in",以便在加载图像时淡入淡出

angular.module('myApp').directive('imgPreload', ['$rootScope', function($rootScope) {
    return {
      restrict: 'A',
      scope: {
        ngSrc: '@'
      },
      link: function(scope, element, attrs) {
        element.on('load', function() {
          element.addClass('in');
        }).on('error', function() {
          //
        });

        scope.$watch('ngSrc', function(newVal) {
          element.removeClass('in');
        });
      }
    };
}]);

<img img-preload class="fade" ng-src="{{imgSrc}}">

工作示例:http://ishq.org