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

Question

我正在研究一个自定义指令，以便在状态（ui-router 发生变化）时预加载图像，以便在导航到新状态之前解析数据和内容。

我在这里创建了一个 Pen：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 开发工具中的网络选项卡所示）。如果我让它静态应用样式（或 class）图像显示没有问题，只是加载速度较慢...因此尝试应用指令。

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

Answer 1

element.hide is not a function

您正在呼叫

element.hide();

在你的 link 函数中，但是 jQlite 没有 hide() 方法。由于您没有在 Codepen 中包含 jQuery，因此该行失败。

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

而是使用 css

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

或添加jQuery

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

Custom directive for preloading background image not working AngularJS

background-image

image-preloader

angularjs

angularjs-directive