In certain versions of IE, you have to make absolutely sure that the .load()
handler is applied BEFORE the .src
property. If the image is in the browser cache, IE may fire the onload event immediately when the .src
property is set. If that happens, the load event may have already happened before you attach your .load()
handler, and thus you will miss the event and your code will never trigger the .fadeOut()
.
The solution is to do things in a couple steps so you can guarantee that the .load()
handler is attached before .src
is set.
$(document).ready(function () {
$('<img>', {
id: 'dvLoading',
css: {
position: 'fixed',
left: '50%',
top: '50%',
margin: '-25px 0 0 -25px;',
filter: 'inherit'
}
}).load(function () {
$(this).fadeOut(2000);
}).attr("src", '../images/loader.gif')
.appendTo(document.body);
});
If there's a chance you also have an issue with your CSS in IE, then please post a working jsFiddle so we can debug it in older versions of IE (hard to do that without seeing running code).