Question

Lazy loading images doesn’t work in IE 9.0.8112.16421.

Here is my code and example how it works:
http://jsfiddle.net/BbA9M/46/

When I open it in IE9 lazy loading images don’t work, but when I click F12 and open developer tools and then refresh page, it’s working great.

I tried to add

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />    

to my head, but it didn’t help.

Have you got any idea what should I do to run this code correctly in IE9?

—
EDIT

When I change this part of code:

if(deferred) {
$(objImg).animate({opacity: 0.1}, 250, function(){
objImg.src = deferred;
console.log('Lazy loading img:', objImg.getAttribute('deferred'));
}).animate({opacity: 1.0}, 1000);                        
}         

to shorten:

if(deferred) {
objImg.src = deferred;                                     
}    

Then it works. Here is example: http://jsfiddle.net/BbA9M/53/
Something is probably wrong with JQuery effect or IE9 has a strange issue.

—
EDIT

I’ve found solution. IE9 doesn’t support this line when developer tools is off:

console.log('Lazy loading img:', objImg.getAttribute('deferred'));

Answer 1

Well… based on your solution, you could add:

if(console && console.log) {
     console.log('Lazy loading img:', objImg.getAttribute('deferred'));
}

Normally the console is only present when you use a debugger (or a debugging script). Happy coding!