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 );
?>
Leave a Reply