自定义指令，用于预加载背景图像不工作AngularJS

-1

我正在处理一个自定义指令，用于在状态（使用ui-router正在更改）时预加载图像，以便在导航到新状态之前解析数据和内容。自定义指令，用于预加载背景图像不工作AngularJS

我创建了一个笔在这里：https://codepen.io/wons88/pen/NgbNvO显示我与bgSrc指令的基本实现：

app.directive('bgSrc', ['preloadService', function (preloadService) { 
    return function (scope, element, attrs) { 
     element.hide(); 

     preloadService(attrs.bgSrc).then(function() { 
      console.log(element.css); 
      element.css({ 
       "background-image": "url('" + attrs.bgSrc + "')" 
      }); 
      element.fadeIn(); 
     }); 
    } 
}]);

和preloadService：

app.factory('preloadService', ['$q', '$rootScope', function ($q, $rootScope) { 
    return function (url) { 
     var deffered = $q.defer(), 
      image = new Image(); 

     image.src = url; 

     if (image.complete) { 
      $rootScope.loading = false; 
      deffered.resolve(); 

     } else { 
      $rootScope.loading = true; 
      image.addEventListener('load', 
       function() { 
        deffered.resolve(); 
        $rootScope.loading = false; 
       }); 

      image.addEventListener('error', 
       function() { 
        deffered.reject(); 
        $rootScope.loading = true; 
       }); 
     } 

     return deffered.promise; 
    }; 
}]);

和HTML：

<div bg-src="https://images5.alphacoders.com/446/thumb-1920-446028.jpg">Background img should show up...</div>

编辑： 问题是，即使加载图像也不会显示（如chrome开发工具中的网络选项卡所示）。如果我静态应用样式（或类），图像显示没有问题，只是加载速度较慢...因此试图应用该指令。

我知道在bgSrc指令中发生了错误，但我无法找到它。对此事的任何帮助，将不胜感激:)

来源

2017-06-15 w0ns88

有什么实际问题？ –

@MikeFeltman我意识到我没有说这个，会编辑我的帖子。该图像没有显示，但是可以在chrome开发工具的网络项目中加载和获取 – w0ns88

@sachilaranawaka no。我创建了我自己的指令，名为bgSrc（html中的bg-src） – w0ns88

element.hide不是一个函数

要调用

element.hide();

在你的链接功能

，但jQlite没有一个hide()方法。既然你没有在你的Codepen中包含jQuery，它在这条线上是失败的。

https://docs.angularjs.org/api/ng/function/angular.element

相反，使用CSS

element.css('visibility', 'invisible');

或者添加的jQuery

来源

2017-06-15 14:03:41

ahh谢谢，在我的实际项目中我有jQuery，我会将其添加到笔:) – w0ns88

自定义指令，用于预加载背景图像不工作AngularJS

回答

相关问题