I’ve developed a JS-heavy site using the Mootools library and have hit a bump in the road. There is a scrolling div on the page that contains 500+ images and I’m trying to implement a lazyload feature so the page doesn’t load all 500+ images at once.
I found David Walsh’s lazyload class but it doesn’t work in webkit browsers (he says this is because of WebKit bug #6656).
I also found this class and it appears to work but doesn’t really. It still loads all images on the page but hides the images outside of the viewport and fades them in when scrolled into view.
There seem to be a number of jQuery lazyload classes that work really well (in all browsers), but I’m already weeks into the development of this site and can’t really justify switching for this or using two libraries.
Anyone know if there is a Mootools lazyload class out there that works in webkit browsers? If not, have any recommendations? Do I have to resort to using jQuery alongside Mootools?
This issue is holding development up a bit.
You could wrap the images inside of a noscript tag. Browsers won’t load images inside of there if you have Javascript enabled. The nice thing about it is that it degrades well for non-JS browsers. I describe in more detail here:
http://experimentsbykevin.tumblr.com/post/754769738/lazy-image-loading