AngularJS加载图像指令setTimeout IE 10问题答案

【问题标题】：AngularJS loading image directive setTimeout IE 10 issueAngularJS加载图像指令setTimeout IE 10问题
【发布时间】：2014-06-25 14:09:57
【问题描述】：

问题：当用户加载页面时，页面上的一些图片还在处理中（基本上图片已经知道的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、Safary 和 Chrome 中运行良好，但是当我在 IE10 和 IE 11 中测试时，“错误”事件正确执行，但“加载”事件从未执行。 IE 只是不断尝试在 setTimeout 中设置 src 属性，但由于某些原因，当图像不再损坏时，它永远不会绑定“加载”。

【问题讨论】：

也许这应该有帮助？ css-tricks.com/snippets/jquery/… 但结果是图片不会缓存到客户端。
是的！非常感谢！我添加了： element.attr('src', attrs.src + "?" + new Date().getTime()) 现在它可以在 IE 中使用

标签： javascript html angularjs internet-explorer

【解决方案1】：

IE 的修复是添加：

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

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

谢谢！

【讨论】：