Question

问题：当用户加载页面时，其上的一些图像仍在处理中（图像中已经知道网址已经存在）。

解决方案：我已创建指令以显示加载微调器占位符而不是图像，而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中测试“错误”时事件正确执行但是“加载”＃39;事件永远不会执行。 IE只是继续尝试在setTimeout中设置src属性，但由于某些原因它永远不会绑定＆＃39; load＆＃39;当图像不再破碎时。

Answer 1

IE的修复是添加：

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

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

中的链接

谢谢！

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

1 个答案: