Lazy loading and Isotope - working in Firefox, but not IE

Question

I have had a go at implementing lazy loader on my site. See the sandbox here:

http://www.brencecoghill.com/projects/north-vietnam/

the following text was added to my isotope to make this work (along wit the necessary html and linking to the library from the header):

$("img").lazyload({
    event : 'scroll',
    effect : 'fadeIn',
    appear: function(){
    }
});

This appears to work fine in firefox, but is a total fail in IE (i tested with version 8) - just displaying grey boxes.

1. how do I fix this to work in IE? (at least version 8 or greater)

2. is there a way to setup lazyloader so that it degrades nicely?

FYI I used these links to figure out how to implement this: http://www.appelsiini.net/projects/lazyload

Combining jQuery Isotope and Lazy Load

http://jsbin.com/ajoded

http://jsfiddle.net/wN6tC/73/

EDIT: i remove the line that was trying to write to the console above. Any other suggestions on fixing the other script errors I am getting?

Answer 1

Works fine for me in IE now that you removed console but you still have a js error. I am not certain why that error is occuring, maybe it's the jQuery.noConflict();

IE:

SCRIPT5002: Function expected 
animate-bg.js, line 8 character 1

Chrome:

Uncaught TypeError: object is not a function animate-bg.js:71 (anonymous function)
animate-bg.js:71

To answer the second question..

is there a way to setup lazyloader so that it degrades nicely?

You could follow the instructions "Fallback for Non JavaScript Browsers". Which is basically to setup code for images like this:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

Then add some CSS to hide

 .lazy { display: none; }

When the page's jquery loads immediately call something like this to show the images again.

$("img.lazy").show().lazyload();