Placeholder for broken image fails in IE11, using holder.js and AngularJS

Question

I try to setup a placeholder for broken image, using holder.js in an AngularJS framework.

Everything works perfectly on all browsers, except with IE11 (what a surprise!), which gives me a strange "invalid property value" error... I did not even test with older versions of IE.

So, it works when :

• I use "holder.js/100%x100%" directly in the src attribute (with no additionnal directive)
• I use "holder.js/100x100" as a placeholder for broken image

But it fails when :

• I use "holder.js/100%x100%" directly in a data-ng-src instead of src ( => invalid argument)
• I use "holder.js/100%x100%" as a placeholder for broken image ( => invalid property value)

After few other tests (with jQuery or pure javascript), I figured out the error does not come from holder.js. I rather think there is an issue with IE11 when using % character in src/ngSrc attributes programmatically ... but I don't know why if I'm right.

---

Here is the fiddle with the four use cases :

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

If anybody has an idea about the reason or the way to get it working.

Thx for your help...

---

EDIT :

Thx to @imsky, here a working fiddle, using data-src instead of src : http://jsfiddle.net/msieurtoph/184fseew/23/

Answer 1

This is a known bug with IE11, where using % in img.src throws an error: https://connect.microsoft.com/IE/feedback/details/997939/ie11-imageelement-setattribute-fails-with-invalid-argument-when-key-is-src-and-value-has-a-percent

There are two solutions here, depending on whether or not you need the src attribute to be set. The first one is to use data-src instead of src:

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

This is the cleaner solution and one I recommend.

The other solution would be to replace the element with a clone that has the proper src attribute value. This approach is not as clean and introduces overhead if you need to maintain references to the original image element. I only recommend this if the src attribute needs to be properly set.