This Javascript doesn't work in IE but works in Chrome, Firefox and Opera

Question

I have an image and a spinner. I have written some code to say to remove the class 'spinner' when any img has loaded. It works well in Chrome, Firefox and Opera but not Internet Explorer.

I'm on Windows 7 using Internet Explorer 11.

I have created a very basic jsfiddle example here: http://jsfiddle.net/Forresty/o8v6xsze/

For some reason, it's not working in jsfiddle in any browser, so I'm not sure if what to make of that. I have tested it with a click function, so that if I click the image the spinner class is removed, and it works. So I think it's something to do with the loading side.

I have some other javascript going on in my site that works so I don't think it's an IE specific issue.

Here is the code:

HTML:

<div class="spinner"></div>
<img class="workImage" src="http://upload.wikimedia.org/wikipedia/commons/2/23/Lake_mapourika_NZ.jpeg">

css:

.workImage{
    width: 500px;
    height: 500px;
}

.spinner{
    width: 500px;
    height: 500px;
    background: red;
}

Javascript:

$('img').on('load', function() {
    $("div").removeClass("spinner");
})

I've also tried this javascript:

$('img').load(function() {
    $('div').removeClass('spinner');
})

I've no idea what I'm missing. Any help would be appreciated.

Thanks.

possible duplicate of [jQuery callback on image load (even when the image is cached)](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) — antyrat, Sep 21 '14 at 13:01

Claudiu Creanga · Accepted Answer · 2014-09-21T13:18:09.793

0

You need to apply ondomready on the top left in jsfiddle. It is working well. I tested it in IE10 too.

http://jsfiddle.net/o8v6xsze/1/

To solve the issue in IE10, you can use:

$('img').on('load', function() {
    $("div").removeClass("spinner");
}).each(function() {
  if(this.complete) $(this).load();
});

http://jsfiddle.net/o8v6xsze/3/

It is working in my IE10.

edited Sep 21 '14 at 13:18

answered Sep 21 '14 at 12:59

Claudiu Creanga

8,031
10
71
110

Thanks. I've just tested your jsfiddle and it works in all browsers but IE for me. Do you think this is specific to my version of IE? – Forrest Sep 21 '14 at 13:03
maybe it has disabled javascript? run a simple alert to see if it is working. – Claudiu Creanga Sep 21 '14 at 13:04
@Forrest sorry, my mistake. it is not working in IE for me neither. I don't know what I saw the first time. Will look into it – Claudiu Creanga Sep 21 '14 at 13:05
@Forrest It is definitely the issue described by antyrat. If you clear the browsing cache in IE it is working. This is why I saw it is working the first time. – Claudiu Creanga Sep 21 '14 at 13:12
@Forrest Check if that code is working. IE never stops amazing me – Claudiu Creanga Sep 21 '14 at 13:19
That has done the trick! Thanks very much for your help. I'm still confused as to how IE is the only browser that had the issue...but that's IE I guess lol. – Forrest Sep 21 '14 at 13:23

This Javascript doesn't work in IE but works in Chrome, Firefox and Opera

1 Answers1