AngularJS加载图像指令setTimeout问题

AngularJS loading image directive setTimeout IE 10 issue

本文关键字：setTimeout 问题 指令 图像 加载 AngularJS      更新时间：2023-09-26

问题:当用户加载页面时，上面的一些图像仍在处理中(基本上这些图像还没有知道url)

解决方案:我已经创建了一个指令来显示加载旋转器占位符而不是图像，并且setTimeout试图从该位置加载图像，直到成功，如下所示:

myApp.module.directive('errSrc', function () {
return {
    link: function (scope, element, attrs) {
        element.bind('error', function () {
            element.hide();
            $('#loading_image_placeholder_' + element.attr('id')).show();
            setTimeout(function () {                    
                element.attr('src', attrs.src)
            }, 3000);
        });
        element.bind('load', function () {                
            element.show();
            $('#loading_image_placeholder_' + element.attr('id')).hide();
        });
    }
}});

我这样使用

<img ng-src="/some/not_yet_avaliable/url_to_image.jpg" err-src id="someId"/>

问题:这个解决方案在FF, safari和Chrome中工作良好，但是当我在IE10和IE 11中测试"错误"事件正确执行，但"加载"事件从未执行。IE只是试图在setTimeout中设置src属性，但由于某些原因，当图像不再破碎时，它永远不会绑定'load'。

修复IE的方法是添加:

element.attr('src', attrs.src + "?" + new Date().getTime())

根据评论中的链接http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

谢谢!

相关文章：