jQuery error() function not working in IE

Question

I want to display two images that I have no idea when they will be generated. So I want to use the jquery error function to keep checking if the images exist, and display each. Following code works on every browser except IE. Why does it not work on IE, really appreciate your help.

<style type="text/css">
DIV#loader {
    width: 500px;
    height: 500px;
    overflow: hidden;
}

DIV#loader.loading {
    background: url(spinner.gif) no-repeat center center;
}
</style>


<script type="text/javascript">
$(document).ready(function() {
    var image_names = new Array(2);
    image_names[0] = 'a.jpg';
    image_names[1] = 'b.jpg';
    var divs = document.getElementsByTagName("div");
    for ( var i = 0; i < divs.length; i++) {
        showImage(image_names[i], divs[i]);
    }
});

function showImage(src, div) {
    var img = new Image();
    $(img).load(function() {
        $(this).hide();
        $(div).removeClass('loading').append(this);
        $(this).fadeIn();
    }).error(function() {
        setTimeout(function() {
            $(img).attr('src', src);
        }, 2000);
    }).attr('src', src);
}
</script>

This is the HTML body

<body>
<h1>Image Loading</h1>
<div id="loader" class="loading"></div>
<div id="loader" class="loading"></div>
</body>

It seems like IE does not know the image is generated if it does not exist when the page first loads

When you use script debugger in IE, which line of code shows the error? — Jonas T, Jul 23 '12 at 00:17
Id should be unique `loader` used with more than one element. — The Alpha, Jul 23 '12 at 00:22
Just checking, try to call `$(img).attr('src', src);` without setTimeout. — The Alpha, Jul 23 '12 at 00:30
It did not show any errors when I was using script debugger in IE — user1544640, Jul 23 '12 at 00:35
Try something like this: http://stackoverflow.com/a/2104998/1329367 — Mahn, Jul 23 '12 at 14:52
As a side note avoid duplicate IDs like @SheikhHeera suggests, IE is much stricter to these kind of mistakes. — Mahn, Jul 23 '12 at 16:45

score 0 · Answer 1 · answered Jul 23 '12 at 00:37

0

It's the $(document).ready({}) part; throws an error in ie for me. Changing it to $(function(){}); seems to work for me at least in IE.

answered Jul 23 '12 at 00:37

jeschafe

2,683
1
14
13

which version of IE are you using? I first used `$(function(){});`, and it did not work for me.. I am using IE 9 – user1544640 Jul 23 '12 at 00:40
??? not sure what that has to do with it? I did it in jsfiddle and it runs every time. Don't have large enough images to maybe test it as well as it should be but the concept should be the same. http://jsfiddle.net/uvtDm/1/ – jeschafe Jul 23 '12 at 00:45
Yea, it worked if images exist, but i have no information about when the images will be generated, and I want to display it immediately if one is generated. So the page should keep checking if image files are present, and they are there, then display them, if not, keep checking. If delete one image file, then open the page, after you put it back, it wont show on the page if you use IE, but it worked on other browsers. – user1544640 Jul 23 '12 at 04:07

score 0 · Accepted Answer · answered Jul 23 '12 at 15:28

0

Caching caused the problem. Changed the src to:

$(img).attr('src', src + "?" + (new Date().getTime()));

answered Jul 23 '12 at 15:28

user1544640

155
1
1
6

jQuery error() function not working in IE

2 Answers2