AngularJS loading image directive setTimeout IE 10 issue

Question

The problem: When the user load the page, some images on it are still processing (basically the urls are already known by the images are not there yet).

The solution: I've created the directive to show a loading spinner placeholder instead of the image, and setTimeout trying to load an image from the location until success like this:

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();
        });
    }
}});

and I use it like this

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

The question: this solution works fine in FF, Safary and Chrome however when I test in IE10 and IE 11 the 'error' event is executed correctly but 'load' event is never executed. IE just keep trying to set src attribute in setTimeout but for some reasons it never bind 'load' when the image are not broken anymore.

Answer 1

the fix for IE was to add:

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

according to link in the comments http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

Thanks!