Lazyload

Why lazyload?

When your webpage has 100 images, 3 iframes and 2 widgets, how many of them will be seen by your visitors? You don't know.

Still, browsers will download every resources of your webpage. Because that's the way the web works today.

Lazyloading resources on a website helps reducing the number of requests issued by browsers when parsing your pages.

This standalone, ~1kb script only loads the resources that are visible in the viewport.

All you have to do is include the lazyload.min.js in you webpage. At the top for maximum compatibility (ask for details).

This webpage demonstrates different ways to use vvo/lazyload.

Images

All the images you are seeing are loaded when they are near 200px ofthe current viewport bounds.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Some images:

Because we have a 200px offset, lazyloading is invisible to the user.

No fancy fadeIn when the image loads, sorry. But you could easily implement it with the custom-callback feature.

Code:

As you can see, we are using data-URI based blank images while waiting for the real image to be displayed.

You could also use any image you want, a loader, a blank gif. We recommend using data-URI so that you can have one less request.

Iframes

The very same technique for images can be used for iframes.

A lot of iframes are crap we want to put at the bottom, so now we can also delay their loading untill our visitors really needs them.

Scroll for some iframes demos that were lazyloaded while you are reading this.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Now scroll down.

Random iframe:

Code:

As you can see, syntax is similar to the image example, easy!

3rd party Widgets

OMG 3rd party content is slow, there's even a blogpost from Steve Souders.

How many times are they really used? You don't know, lazyload them!

Twitter widget:

Code:

You can use lazyload in the same ways you would use his daddy: vvo/in-viewport.

Lazyload is based on vvo/in-viewport because lazyloading an element is only a few steps more than knowing when an element is visible in the viewport.

hidpi images

Depending on your devicePixelRatio, you get a funny cat or an even funny cat.

Open http://bit.ly/vvo-lazyload on your IPAD/Android to see the difference.

hidpi example:

Code:

That's all folks!

Now you get a good idea of different ways to use vvo/lazyload.

For even more ways, read the docs, post issues, contribute.

Lazyload is fully unit-tested using Mocha as you have seen.