Fade Images with MooTools LazyLoad
I recently received an email from a MooTools developer asking a great question about my LazyLoad class:
"I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into the viewport it loads and then fades in with a MooTools tween - so far I've had no luck. Is this easy to do?"
In a word...yes. And you can do it without modifying any of the LazyLoad class source!
The Simple MooTools JavaScript Solution
LazyLoad was created to provide the developer feedback via events. LazyLoad provides a load event which fires during each image load. You can add an onLoad option to the class instance to accomplish the fade:
//new instance
var lazyload = new LazyLoad({
//onLoad event/option
onLoad: function(img) {
//set opacity to 0, fade it in!
img.setStyle('opacity',0).fade(1);
}
});
Once each image is loaded, its opacity is set to 0 and then the node is faded in. Note that LazyLoad's onLoad event isn't a true onLoad event for the image; this is because of caching / onLoad issues with IE. If you have concerns with the fade beating the true image load, one solution could be adding a slight delay:
//new instance
var lazyload = new LazyLoad({
//onLoad event/option
onLoad: function(img) {
//set opacity to 0, fade it in after 100 milliseconds
(function() { img.setStyle('opacity',0).fade(1); }).delay(100);
}
});
Lazy loading images is a crapshoot. It doesn't work in WebKit-based browsers because of a bug they wont fix and IE doesn't provide a reliable onLoad event due to caching issues. In the end, my LazyLoad class does its best to accommodate for capable browsers. And the events I've implemented make any type of load effect easy!
I don’t see this working in Firefox – am I the only one? I see it working in Opera.
Regardless, I would highly recommend against this effect. I have seen several blogs and websites implement this lazy loading technique that fades in images when they come into view. It is terrible and one of the more annoying trends on the web, along with lightboxes where the next / previous arrows move to a new location with every click!
The reason it’s incredibly annoying is because it’s like littering your page with animated gifs. The last thing I want to have happen while reading some interesting article is to scroll and then be distracted by this image flashing into view. Lazy loading should always occur BEFORE the page scroll gets to the image so that the user isn’t subjected to the image loading and distracting them from the text content. It’s especially pronounced when even things like sidebar images are faded in when there is only text in the main article, so now the sidebar is flashing all these images at you and being very distracting.
It’s like putting a flashing siren on every page of a book. Don’t do it!
Works for me without issue in Firefox.
As to your discouraging this effect, I agree — I find it annoying as well. The goal of my post was to show the flexibiilty of both MooTool and LazyLoad.
Hey David
Its a Great Stuff!! Though i am new to Mootools and javascript, so can I use the same Lazyload to have faded alert messages?
Hi.
When loaded demo for the first time in Firefox (3.6.10) script seemed not to work but when refreshed with omitting cache it worked. Could be Firefox aggressive cashing method; I’ve been pulling my hair out yesterday because of it.
I disagree with the previous post and see value in LazyLoading technique as a user – an example may be NetTuts where they place high quality images in the articles and fortunately applied the technique. It’s up to every developer how smartly he/ she uses it (only for article body). Just like those mentioned animated gifs may even today come handy in come cases but has been kind of discredited because of misuse.
Of course, it’s always up to the developper to smartly use such tools… as any other tools!
I’ve seen animated gif used in email marketing to make small animation, and “video” links more “realistic” to web content.
Its not working in Firefox 3.6.10 for me too.
IMHO, LazyLoading should be seemless to the user… as Andy stated, the loading should occurs BEFORE the images gets into the viewport.
Of course, for Demo purpose, it has to be somewhat “seen”, which, by the way, I’m not on this particular Demo. Perhaps, my web is too fast and furious this morning…
I’ve updated the example to enforce a 500 millisecond delay in fading the image so the effect is more apparent. Trust me, it’s working!
Doesn’t work on Firefox,
‘Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10 (.NET CLR 3.5.30729)’
Worked on Opera and Chrome
*sigh* Just saw that I had console statements that were causing problems in Firefox. Sorry everyone!
Aww, it doesn’t work in Safari, although it works in Chrome? What a shame Safari. :'(
Lazy loading isn’t supported by WebKit.
It did work for me at first on Chrome 7 dev.
I’m guessing that this wouldn’t be too easy to switch to a horizontal version? I’d be pretty pleased if you said it would be!
we are using your lazy load plug in. in ie 8 that loaded very slowly any reason for this issue
Hi,seems there is some bug,when src and data-src are equal load event not called so her eis fix for it in loadImage function :
loadImage: function(image) { if(image.get(this.options.realSrcAttribute) == image.get("src")){ image.setStyle("opacity",1); }