Fade Images with MooTools LazyLoad

By  on  

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!

Recent Features

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    MooTools TextOverlap Plugin

    Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...

  • By
    Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...

Discussion

  1. Andy

    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.

    • Pranav Dave

      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?

  2. 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.

  3. Ali

    Its not working in Firefox 3.6.10 for me too.

  4. 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…

  5. 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!

  6. 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

  7. *sigh* Just saw that I had console statements that were causing problems in Firefox. Sorry everyone!

  8. Aww, it doesn’t work in Safari, although it works in Chrome? What a shame Safari. :'(

    • Lazy loading isn’t supported by WebKit.

    • Szikszai Gusztáv

      It did work for me at first on Chrome 7 dev.

  9. 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!

  10. Kirupananthan.G.S

    we are using your lazy load plug in. in ie 8 that loaded very slowly any reason for this issue

  11. Hmayak Tigranyan

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!