0

我尝试使用 AngularJS 框架中的 holder.js 为损坏的图像设置占位符。

一切都在所有浏览器上完美运行，除了 IE11（真是令人惊讶！），这给了我一个奇怪的“无效属性值”错误......我什至没有用旧版本的 IE 进行测试。

因此，它在以下情况下起作用：

  • 我"holder.js/100%x100%"直接在src属性中使用（没有附加指令）
  • 我"holder.js/100x100"用作损坏图像的占位符

但它在以下情况下失败：

  • 我"holder.js/100%x100%"直接在 adata-ng-src而不是src（=> 无效参数）中使用
  • 我"holder.js/100%x100%"用作损坏图像的占位符（=> 无效的属性值）

经过几次其他测试（使用 jQuery 或纯 javascript），我发现错误不是来自 holder.js。我宁愿认为以编程方式在 src/ngSrc 属性中使用字符时 IE11 存在问题%......但我不知道为什么我是对的。

这是四个用例的小提琴：

http://jsfiddle.net/msieurtoph/184fseew/

如果有人对使它起作用的原因或方法有任何想法。

谢谢你的帮助...

编辑 ：

感谢@imsky，这里是一个工作小提琴，使用data-src而不是：http src: //jsfiddle.net/msieurtoph/184fseew/23/

4

1 回答 1

1

这是 IE11 的一个已知错误，其中使用 % inimg.src会引发错误：https ://connect.microsoft.com/IE/feedback/details/997939/ie11-imageelement-setattribute-fails-with-invalid-argument-when- key-is-src-and-value-has-a-percent

这里有两种解决方案，取决于是否需要设置src属性。第一个是使用data-src而不是src：

$timeout(function() {
     _this.setAttribute('data-src', holderSrc)
     Holder.run({
         images: _this,
         nocss: true
     });
 });

这是更清洁的解决方案，也是我推荐的解决方案。

另一种解决方案是将元素替换为具有适当src属性值的克隆。如果您需要维护对原始图像元素的引用，这种方法不那么干净并且会引入开销。src如果需要正确设置属性，我只建议这样做。

于 2014-11-17T03:06:49.347 回答