Itthinx LazyLoader Manual

Shortcodes

The following enclosing shortcode tells the Itthinx LazyLoader to handle the content it encloses:

[itthinx-lazyload]...[/itthinx-lazyload]

Note that there is no self-closing version of the shortcode, i.e. the content to be lazy loaded must be enclosed by an opening

[itthinx-lazyload]

and a closing

[/itthinx-lazyload]

Important : If you want to enclose HTML you must switch the editor to HTML view first.

Example

The following example embeds Google Adsense code in [itthinx-lazyload] shortcode tags and lets the Itthinx LazyLoader handle its presentation:

[itthinx-lazyload min_height="280" throbber="true"]
<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
[/itthinx-lazyload]

This is how it renders:

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


[/itthinx-lazyload]

Attributes

The [itthinx-lazyload] shortcode supports the following attributes:

load_on_sight

Loads the content only when it enters the viewport. Content will only be loaded once it enters the visible part of the page.
Default: true
Possible values: true, false

throbber

Displays a throbber until the content is loaded.
Default: false
Possible values: true, false

auto_noscript

Will try to identify and present <noscript> alternatives for visitors who have JavaScript disabled.
Default: true
Possible values: true, false

offset

If an offset of X is given, the content will start to load when it is X pixels from entering the viewport. This can be used to anticipate loading and make content appear earlier. The value given is in pixels.
Default: 0
Possible values: 0, 1, 2, … measured in pixels

height

Applies a fixed height to the content area.
Default: –
Possible values: positive integer, measured in pixels

width

Applies a fixed width to the content area.
Default: –
Possible values: positive integer, measured in pixels

min_height

Applies a minimum height to the content area.
Default: –
Possible values: positive integer, measured in pixels

min_width

Applies a minimum width to the content area.
Default: –
Possible values: positive integer, measured in pixels

container

Uses a specific container to enclose the content area that is lazy loaded.

class

Applies a specific CSS class to the container of the content area.

id

Applies a specific CSS ID to the container of the content area.

mesosense

Uses an alternative algorithm to lazy-load the content. Do not use this option unless the normal way doesn’t work.
Default: false
Possible values: true, false

show_errors

Displays errors in the content area.
Default: false
Possible values: true, false

Use with widgets

The Itthinx LazyLoader can be used with widgets in two ways:

• Installing the Lazy Widget Loader to control how widgets present their content.
• Using the [itthinx-lazyload] shortcode.

The first option is free and easy to use. Get the Lazy Widget Loader plugin.

The second option requires you to have direct control over the HTML of your widget so you can apply shortcodes, for example using the Custom Post Widget plugin.

API

In addition to shortcodes and widgets integration via Lazy Widget Loader, the loader provides the following function that can be used directly in theme template files.

IX_LL_lazyload( $markup, $atts )

The function renders the HTML that you insert where the lazy-loaded content should appear.

Parameters:

$markup string The HTML to lazy-load.

$atts array Attributes that determine lazy-loading options. The same attributes as those used for the [/itthinx-lazyload] shortcode are supported.

Returns:

HTML that lazy-loads the content provided.

Example

$atts = array( "throbber" => "true" );
echo IX_LL_lazyload( $markup, $atts );

Instead of embedding the Adsense example from above using shortcodes, we’ll call IX_LL_lazyload():

<?php
    ob_start();
?>
<div style="border: 1px solid #ccc; background-color: #eee; width: 100%;">
<div style="width: 336px; height: 280px; margin: auto; padding: 10px;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXXXXXXXX";
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<?php
    $markup = ob_get_contents();
    ob_end_clean();
    $atts = array( "throbber" => "true" );
    echo IX_LL_lazyload( $markup, $atts );
?>