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.
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments