Your cart is currently empty!
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 ); ?>
Comments
57 responses to “Itthinx LazyLoader Manual”
Kento,
I was wondering if there is any way to implement itthinx Lazyloader in order to achieve the same effect TechCrunch (www.techcrunch) does with its share buttons. They are first loaded as static images, then after the whole page is loaded the share buttons start to appear. Any ideas?
Also, I believe the addition of a trigger on the onload event would be awesome to have.Thanks!
Hi Felipe,
Basically that’s possible, I would probably approach it like this:
<a href="..."><img id="killmelater" src="..." /></a>
[itthinx-lazyload]... real button code here
<script type="text/javascript">
$('#killmelater').remove();
</script>
[/itthinx-lazyload]
The onload event on what element are you referring to?
Hope the above helps, at least in concept
Cheers
Hi Kento, damn, it looks like your plugin is not compatible with head.js
I’m using the “HeadJS Plus” WordPress plugin but it looks like I may have to code it manually and exclude your script from loading in parallel.
That’s interesting, make sure that it does not interfere with how LL loads things. Let me know if you have any questions or need help on that.
Hi Kento. So I paid for the plugin and I installed it. Nothing breaks when the plugin is active so that’s good. However, doing a quick test of lazy loading a widget I click the Lazy Load checkbox at the bottom of the widget and when I reload the page the widget never appears. I’ve tried 3 widgets with the same result — they never render.
Is the plugin compatible with W3TC? Cache is the only issue I can imagine. The options is collapsed so I’m assuming it is ok to leave the default settings as is (which is mostly empty).
Hi Simon, caching isn’t really related to lazy loading so that shouldn’t be an issue. Would you mind sharing a link to the site to have a look?
Actually, easier to show and to keep there:
in the footer, I have on accentuation “Política”Code used in the footer http://snipt.org/uhuc9
You can try at any webpage, for instance http://www.vejaisso.com/cadastrar-se-nos-melhores-sites-downloads-bittorrent-e-torrents/
And the code printed
PolÃtica privacidade
Contato
Pesquisa
Veja Isso desde 2006 | Powered by WordPress##########
Note the error is in this location PolÃtica privacidade
Política became PolÃtica.
Thanks for all the attention
To me this looks like something’s messing up the encoding … what encoding is your blog using? (Settings > Reading > Encoding for pages and feeds)
BTW don’t lazyload the footer, it doesn’t make sense to do that as long as there’s nothing ‘heavy’ there – as it is now, it actually makes things worse. I’m jhust mentioning that in case you’re lazy-loading the footer other than for testing purposes.Encoding is utf-8.
I actually added the loader to the bottom just to easily show you but didn’t found a reason why it wouldn’t be beneficial. Less than 20% reach the footer of my website according to an eye and mouse tracking software. Why does it harm more than help?Thanks Felipe, the reason it is not improving things is that the code that handles the lazy-loading actually adds to the amount of code that is already used to render the page. If there is no big difference in loading resources for the footer, then it shouldn’t be lazy-loaded. About the encoding, it’s odd … we’ll have to figure that out still.
I have tried to change the encoding to latin and other types without luck. Any accentuation is translated by the itthinx-lazy-loader as a weird character.
Can you try to add an exception in order to encapsulate the accentuated words, like á, é, and so on?The thing is that the loader works fine with special characters, but in your case at some stage the wrong encoding seems to get applied. So adding an exception is not a solution but we’ll have to find out what exactly is causing this. Does it happen with other plugins deactivated?
This happens even with Twenty Eleven theme and even with simple text loaded through Itthinx. I have tried á é ó â ã and I have got à é á â ã
Thanks, I would really like to have a further look and help to figure this out. Will need access to the site for that.
Sure, what I need to do? Give you an admin login and password? Where can I mail it to?
I would rather if I could be at least tagging along online, so I can fix up anything weird that may happen asap, so when would you look into this kento (please include GMT).
Thanks!Thanks, I’ll send you an email for that. If you have a testing site where we can do some tests it would be preferable instead of doing that on the live site.
Kento,
I have just bought your plugin and I am an amateur at php (sorry about that!). I have 3 questions.
########
1
#######In my theme I have the ads included like this
And inside this single_customizada.php there is another include to the file location, depending on the post category, with the Google adsense code.
I would like to make it lazy load.############
2
###########
Also, I would like to lazy load the entire comments area, so every comment would show up only if the user scroll down close to the bottom.I have tried the code bellow and a few others without success. My guess is the php can’t run, but I can’t extract the results of the PHP code in order to then make it lazy load as plain html.
1 && get_option( ‘page_comments’ ) ) : // Are there comments to navigate through? ?>
<?php previous_comments_link( __( '← Older Comments’, ‘TheSource’ ) ); ?>
<?php next_comments_link( __( 'Newer Comments →’, ‘TheSource’ ) ); ?>
‘comment’,’callback’=>’et_custom_comments_display’) ); ?>
1 && get_option( ‘page_comments’ ) ) : // Are there comments to navigate through? ?>
<?php previous_comments_link( __( '← Older Comments’, ‘TheSource’ ) ); ?>
<?php next_comments_link( __( 'Newer Comments →’, ‘TheSource’ ) ); ?>
comment_status) : ?>
comment_status) : ?>
esc_attr__( ‘Submit Comment’, ‘TheSource’ ), ‘title_reply’ => ” . esc_attr__( ‘Leave a Reply’, ‘TheSource’ ) . ”, ‘title_reply_to’ => esc_attr__( ‘Leave a Reply to %s’ )) ); ?>“true” );
echo IX_LL_lazyload( $markup, $atts );
?>###########
3
###########
On the matter of the comments area, will it hit my SEO? I mean, will googlebot still be able to see the lazily loaded comments?##########
4
#########Is there any way to make get the result from a PHP execution and then making it lazy load? Thanks
Code was pasted wrong
1 && get_option( ‘page_comments’ ) ) : // Are there comments to navigate through? ?>
<?php previous_comments_link( __( '← Older Comments’, ‘TheSource’ ) ); ?>
<?php next_comments_link( __( 'Newer Comments →’, ‘TheSource’ ) ); ?>
‘comment’,’callback’=>’et_custom_comments_display’) ); ?>
1 && get_option( ‘page_comments’ ) ) : // Are there comments to navigate through? ?>
<?php previous_comments_link( __( '← Older Comments’, ‘TheSource’ ) ); ?>
<?php next_comments_link( __( 'Newer Comments →’, ‘TheSource’ ) ); ?>
comment_status) : ?>
comment_status) : ?>
esc_attr__( ‘Submit Comment’, ‘TheSource’ ), ‘title_reply’ => ” . esc_attr__( ‘Leave a Reply’, ‘TheSource’ ) . ”, ‘title_reply_to’ => esc_attr__( ‘Leave a Reply to %s’ )) ); ?>“true” );
echo IX_LL_lazyload( $markup, $atts );
?>This question 3 worked itself out. Thanks!
With Include the code is transferred to the page and itthinx, but it doesn’t show up for me.
Here is the code.
Tried with adsense with ‘ and with ” and didn’t work as well.On regards the comments, I made it work, but it broke accentuation (á,é) from latin language.
Can you send me a link to the page where that happens please?
Sure can Kento. Here is the code being loaded with the latest version of the plugin (downloaded yesterday). WP 3.3.1
Page as it should be (3 adsense ads)
http://www.vejaisso.com/proteger-sua-rede-wi-fi-de-internet-wireless-evitar-hackear-sinal-wifi/Code being loaded with itthinx
http://snipt.org/uhkb4#expandPage with itthinx loading the ads (only this page is using just for show)
http://www.vejaisso.com/como-abrir-uma-garrafa-de-cerveja-sem-ter-um-abridor/I am also having a problem with the comment being loaded, they are loaded correctly, however it messes accentuation of á, é, ó, õ, ô and so on.
Here is the code used to be at the comments (not shown because couldn’t isolate the problem to show you
http://snipt.org/uhahd7#expandBasically all my issues are related with the code not being transposed to the page lazily correctly, there are changes that shouldn’t happen with itthinx loading it.
Thanks for the links and snippets, it looks like there is some sort of conflict, the code you are using seems ok and it should work just fine. If you don’t mind let me have a look at the admin section of the site.
Maybe I haven’t been clear about what are my goals. Here is a website that lazy loads the Outbrain widget, and the comments.
http://www.travelandleisure.com/articles/americas-most-romantic-cities/15
No that’s ok, I see what you’re trying to achieve.
Kento, I don’t feel comfortable issuing an admin login. I can, however provide a list of plugins I am using and that are active, files minified and attest that even without Hypercache and W3TC, they don’t work.
Info
$$$$$$$$$$$$$$$$$$
WP 3.3.1
Running on NginxPlugins list and versions
http://snipt.org/uhoi9#expandTheme
The Source from Elegant ThemesMy tries
%%%%%%%%%%%%%%%%%%
The one thing I noticed was my jQuery was 1.6.0 and yours was newer, but I have changed all to the newer google apis it and it didn’t make any difference.I am using Cloudflare, however during my testings I have turned off therefore there were no changes in the error. At the moment I will be turning it on again.
Changed the theme to Twenty Eleven, didn’t help either
Turned all plugins off besides yours, using Twenty Eleven, didn’t help either.
deleted and reinstalled the plugin. Didn’t help.
##########################
Lastly, it also gives an error when added as a short code to the text, a weirder one.
For example, I have added the [itthinx-lazyload] code in page (with the php lazy load markup) and another without the [itthinx-lazyload] short code
With [itthinx-lazyload] and with php API
http://www.vejaisso.com/como-abrir-uma-garrafa-de-cerveja-sem-ter-um-abridor/Without [itthinx-lazyload] but with php API
http://www.vejaisso.com/vaso-microondas-bonito-e-util/
(This error! is a YS conflict)Please help me make your plugin work. It would be amazing if it did. I don’t want to ask for a refund, I just want it to work on my blog.
Thanks for the info, but without having access to the admin it may be more tricky … The two pages you mention, please post the code that you are enclosing including the [itthinx-lazyload] shortcode and I’ll test it on a neutral site. You mention “Turned all plugins off besides yours, using Twenty Eleven, didn’t help either.” – that simply must work unless there is a conflict with your site’s setup.
Kento, I have retried using Twenty Eleven and Itthinx only and still there is an error. Both while i use this code inside the post
http://snipt.org/uhrb2#expand
And the code with the php that does not receive from the include (but this code IS included on the page. My intention is to have the same code but not the whole adsense code, but an include between the ob start).
http://snipt.org/uhrc6#expandThis is my nginx conf file
http://snipt.org/uhrd0#expandAnd I am running nginx 0.9.4 on php 5.2 with fast cgi and XCache.
In both cases you have
data-cfasync="false"
on the script tag. Remove that and it will work.
AWESOMEEEEEEE!! That worked flawlessly!!! Oh my, thank you so much Kento!! That rocked!
Do you know if Adsense works as planned when using lazy loading?
Also, there is a second error in the lazy loading, could you please look into the accentuation error?Here is the error with the accentuation when using lazy loading (http://imgur.com/KHzQe) code when I add comments to the lazy load, the code used http://snipt.org/uhtj3 and the resulting code of the webpage (with the accentuation error http://snipt.org/uhub6
Anyway, thanks for all the support Kento!
Thanks dentvii, great to see that working out. I’ll have a look at the encoding issue and let you know.
Thanks for your quick responses. I got the code working with the irame mode no problem. not sure what that link you sent me is all about but I will try it out. thanks!
Hello I just purchased this and can;t get it to work with a facebook like button. Nothing shows in the div.
Hi zach, can you please post the code you are using to check it?
Hi yes the code I am using is:
<div class="fb-like" data-href="” data-send=”false” data-layout=”button_count” data-width=”50″ data-show-faces=”false”>
“true” );
echo IX_LL_lazyload( $markup, $atts );
?>For some reason the like button will not show up.
Woops. Looks likt the code was stripped. I am using the php code shown above in the adsense example.
Have you followed the steps mentioned here: http://developers.facebook.com/docs/reference/javascript/ ? If you are using the SDK it is supposed to load asynchronously – still not on sight as the lazy loader though so you can still take advantage of it by wrapping the code within the itthinx-lazyload shortcode. Also check the double quotes used in the shortcode (must be plain double quotes “). Another option is to use the iframe version.
look http://www.blogdiar.biz , it don’t work at my blog
my page.php code , here my page.php code http://pastebin.com/iRS8MC5e
That’s not how you’re supposed to use it. Try using it within a page template but not surrounding it. Also the entire approach is pointless, you don’t lazyload a whole page. You lazyload parts of a page where it really makes a difference, for example apply it to a Facebook Like Box etc.
One more thing: it also changes CSS styles…
Woops this one almost got buried … please try with the updated release and let me know if you still experience issues after that. Thanks again for taking the time
Hey!!! The plugin works almost fine. “Almost” because the html content shortcoded changes the characters codification and appears with funny simbols. You can take a look here.
Is there a way to avoid that? If not, the plugin does not work for me.
Thnaks a lot for your answer.
Seems to be related to an unsolved issue with some shortcodes, looking into it and hope to get that solved asap.
I need help. I bought this script to use to my photo gallery websites. My site have a lot of images in single page. For example I will use this script on a page where there are 150 images on single page.
Shortcode for gallery looks like this: [gallery link="file" order="DESC" columns="4" orderby="ID"]
I tried to replace it with:
[itthinx-lazyload][gallery link="file" order="DESC" columns="4" orderby="ID"][/itthinx-lazyload]Nothing works.. Gallery doesn’t loads.
Only images should be lazy loaded. And other contents may load as they do now.Please help me and tell me how to archive this.
Would be good to support nested shortcodes, the plugin doesn’t support them in its current version, but that can be added. I’ll run some tests and let you know.
Nested shortcodes are now available with the Itthinx LazyLoader. The update will be distributed to contributors today.
Thanks a lot I’m going to test it today.
It looks like nested shortcodes still not works. I replaced all files to newest version of your plugin and replaced all shortcodes in my WordPress from
[gallery link="file" order="DESC" columns="4" orderby="ID"]
to
[itthinx-lazyload][gallery link="file" order="DESC" columns="4" orderby="ID"][/itthinx-lazyload]
I now get blank where gallery should be appear.
Please test it once and give us another fix.
Thank you.
You need to close the gallery shortcode, for example using the self-closing form:
[itthinx-lazyload]
[gallery ... /]
[/itthinx-lazyload]hmm..
[itthinx-lazyload][gallery link="file" order="DESC" columns="4" orderby="ID" /][/itthinx-lazyload]gives also blank page..
You must have a different problem I suppose, please take a look here:
http://www.itthinx.com/itthinx-lazyloader-nested-shortcodes/
This is exactly the example you have given and it displays without any problem.
Maybe your theme is interfering or another plugin. Could you please send me a link to the page where the problem you have shows up? I’d take a look at it and if I see anything that might cause a problem I’ll let you know.
Can you give me an example with a div in it?
I’ve updated the example here to show how you could do it using an output buffer – it’s the Adsense example within divs. The HTML that should be lazy-loaded is passed to IX_LL_lazyload().
Hi,
i bought the lazy loader, but if i enclose some html code in page.php it don’t work:
[itthinx-lazyload]html code
[/itthinx-lazyload]best,
tobiasHi tobias, you don’t use shortcodes in page.php, simply use the API directly as shown in the example at the end of this post – use
echo IX_LL_lazyload(...)
to render the lazy-loaded HTML. Let me know if you need further help.
Leave a Reply