Itthinx Lazyloader Demo

This is the demo page for the Itthinx LazyLoader plugin … it’s very versatile and able to load virtually any content on demand.

Lazy Loading or Lazy Acquisition defers the acquisition of resources until needed.

All of these examples are embedded within itthinx-lazyload shortcodes, using their original unmodified markup.

These examples include embedded scripts, external scripts, objects, iframes, … the Itthinx LazyLoader is quite flexible and adapts to the content that needs to be embedded.

You have already seen it in action, some of the widgets on the left are loaded thanks to the combined efforts of the Lazy Widget Loader plugin and the Itthinx LazyLoader plugin.

If you scroll down this page, you’ll see more examples of the Itthinx LazyLoader in action, it’s capable of loading any content anywhere on a page.

Also it’s worth to mention that both plugins provide lazy-loading for any content and not just images as quite a few jQuery plugins and solutions do. Anyhow, let’s take a look at the examples … oh and if you’d like to see more examples here, please leave a comment with your suggestions.

Twitter

There are two widgets from Twitter that are on all pages of the site, so no need to add more of them here 😉 You can see them just to the left of this text.

The first one is a Twitter Follow Button, the second one is a Profile Widget.

Facebook

A Facebook Like Box is shown on the left side of every page on the site. It’s located right below the Recent Comments and is loaded on sight. I’m not much of a Facebooker myself so don’t expect to see much of an audience, it’s just to show you that the plugin works nicely with that kind of widget as well. Actually Facebook’s widgets can really slow things down because it often takes quite long to load its content. It’s very useful to load this kind of widget only when it enters the viewport and that’s a good reason to use the Itthinx LazyLoader plugin.

Lazy Widget Loader & Itthinx LazyLoader

Note that the Twitter and Facebook widgets on the left side are actually not loaded using shortcodes but through the Lazy Widget Loader which is capable of lazy-loading widgets on its own and which in this case is using the advanced features of the Itthinx LazyLoader plugin – they really like each other :).

Flickr

There are two types of Flickr badges you can embed in your site, based on HTML and Flash. You can use them to show your own pictures or public pictures by tag.

This is a Flickr HTML Badge showing three mid-sized pictures, it is lazy loaded, given a height and a throbber.

[itthinx-lazyload height=”260″ throbber=”true”]

[/itthinx-lazyload]

You can make your own Flickr badges here.

Adsense

Ads, a welcome source of income for many, tend to slow down pages when they are embedded in the page’s content. But embedding an ad within the page’s content is often what makes it interesting for the publisher and the advertiser. The catch is that ads which load slowly can have a serious impact on the visitor’s experience. If the ad takes long to load and the content after the ad doesn’t show up unless the ad is fully loaded, you’re in for a lazy-loading solution.

An ad loaded with given height and a throbber.

[itthinx-lazyload min_height=”280″ throbber=”true”]


[/itthinx-lazyload]

Google Map

Maps, maps … maps everywhere. Since Google provided us with the marvels of embedded maps, we enjoy putting them anywhere on our pages. And here is another case for lazy-loading: maps can pull substantial amounts of data before they show up. Like the following one, featuring satellite imagery of a neat island. Imagine you really need this map at the top of your page, but want your content below to be available immediately … lazy-loading comes in handy once more.

A map showing Neshobe Island.

This lazy loading container is just given a height.

[itthinx-lazyload height=”480″]

View Larger Map
[/itthinx-lazyload]

Neshobe Island? Harpo Speaks!

If you’re intrigued about why on Earth I’d chosen to show you a map featuring Neshobe Island, then do yourself a favor and have the pleasure of reading Harpo Speaks!

Of course, that is an example of embedding an Amazon widget.

[itthinx-lazyload height=”300″]

[/itthinx-lazyload]

Moving pictures. Can you imagine a site that would not embed a video and pretend to be en vogue? If you provide videos hosted on your site or via a CDN and would like to show a string of them on a page, there is no need to load them all at once. You could put them on separate pages or if you prefer to have them on a single page use lazy-loading to pull them in when needed.

Here are two videos along with an ad, all are embedded in the page by lazy-loading through the Itthinx LazyLoader:

Adsense

[itthinx-lazyload height=”600″]


[/itthinx-lazyload]

Vimeo

[itthinx-lazyload]

[/itthinx-lazyload]

YouTube

[itthinx-lazyload]

[/itthinx-lazyload]

DeviantArt

And here’s a new cool widget from deviantART, it’s fun to watch what comes next and of course, it’s lazy-loaded.

[itthinx-lazyload width=”380″ height=”240″ throbber=”true”]

[/itthinx-lazyload]