问题
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.
how do I fix this to work in IE? (at least version 8 or greater)
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?
回答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();
来源:https://stackoverflow.com/questions/13004856/lazy-loading-and-isotope-working-in-firefox-but-not-ie