Question

我使用imageloaded指令在图片加载时淡入图片。

 app.directive('imageloaded', [

    function () {

        'use strict';

        return {
            restrict: 'A',

            link: function (scope, element, attrs) {
                var cssClass = attrs.loadedclass;

                element.bind('load', function (e) {
                    angular.element(element).addClass(cssClass);
                });
            }
        }
    }
]);

因此使用

 <img ng-src="{{preview.display_url}}" class="animation-fade" imageloaded
                             loadedclass="animation-faded"/>

但有时图像尚未可用（例如，排队等待调整大小），并且网址可能需要几秒钟。

如果图像未加载，我想尝试每5秒重新加载一次。我把它封装在这个指令中时难以理解。

Answer 1

想法是设置一个每5秒检查一次的超时计时器。如果发生onload事件，它将清除当前超时并添加类。

尝试这样的事情：

app.directive('imageloaded', [

    function () {

        'use strict';

        return {
            restrict: 'A',

            link: function (scope, element, attrs) {

                var cssClass = attrs.loadedclass,
                    origSrc,
                    timeout;

                function reload() {
                    timeout = setTimeout(function() {
                        if (!origSrc) {
                            origSrc = element[0].src;
                        }
                        element[0].src = origSrc + '?' + Date.now();
                        reload();
                    }, 5000);    
                }

                reload();

                element.bind('load', function (e) {
                    clearTimeout(timeout);
                    element.addClass(cssClass);
                });
            }
        }
    }
]);

Angular.js如何重试图像直到可用

1 个答案: