使用angularjs承诺预加载背景图像

Question

如何使用angularjs promises预加载css background-image我想要做的是我可以这样使用的东西:

link: function(scope, element, attrs){
    element.hide();
    url = attrs.url;
    preload(url).then(function(loadedImageURL){
        element.css({
            background-image: "url('" + loadedImageURL + "')"
        });
    });
    element.fadeIn();
}

请注意,这不是一个重复的问题,这一个.

Answer 1

试试这个:

function preload(url) {
  var deffered = $q.defer(),
      image = new Image();

  image.src = url;

  if (image.complete) {

    deffered.resolve();

  } else {

    image.addEventListener('load', function() {
      deffered.resolve();
    });

    image.addEventListener('error', function() {
      deffered.reject();
    });
  }

  return deffered.promise;
}