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?

Bearnard

Just tried that link in IE7 and the first issue I found is that you have something being written to console. There is no such thing in IE so that will always break. Remove the console statements and see if it works. Besides that your design is broken in other places in IE7. – Seisin

i removed the line writing to the console. thanks. Any suggestions on what is causing the other errors? – Bearnard

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();

Vault