Itthinx LazyLoader Manual


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


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


and a closing


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


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 type="text/javascript" 

This is how it renders:

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



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


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


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


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


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


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


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


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


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


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


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


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


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


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.


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.


$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.


HTML that lazy-loads the content provided.


$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():

<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 type="text/javascript"
    $markup = ob_get_contents();
    $atts = array( "throbber" => "true" );
    echo IX_LL_lazyload( $markup, $atts );

57 Responses to Itthinx LazyLoader Manual

  1. Felipe Veiga May 28, 2012 at 1:13 am #


    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.


    • kento May 28, 2012 at 12:41 pm #

      Hi Felipe,
      Basically that’s possible, I would probably approach it like this:
      <a href="..."><img id="killmelater" src="..." /></a>

      ... real button code here

      <script type="text/javascript">

      The onload event on what element are you referring to?

      Hope the above helps, at least in concept 🙂


  2. Simon April 26, 2012 at 5:24 am #

    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.

    • kento April 26, 2012 at 9:32 am #

      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.

  3. Simon April 26, 2012 at 4:51 am #

    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).

    • kento April 26, 2012 at 9:20 am #

      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?

  4. dentvii April 9, 2012 at 12:36 am #

    Actually, easier to show and to keep there:
    in the footer, I have on accentuation “Política”

    Code used in the footer

    You can try at any webpage, for instance

    And the code printed

    Política privacidade
    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

    • kento April 9, 2012 at 12:33 pm #

      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.

      • Felipe Veiga April 9, 2012 at 10:59 pm #

        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?

        • kento April 10, 2012 at 10:25 pm #

          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.

          • dentvii April 13, 2012 at 3:13 am #

            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?

            • kento April 13, 2012 at 9:54 am #

              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?

      • dentvii April 14, 2012 at 8:12 pm #

        This happens even with Twenty Eleven theme and even with simple text loaded through Itthinx. I have tried á é ó â ã and I have got Ó é á â ã

        • kento April 15, 2012 at 11:06 am #

          Thanks, I would really like to have a further look and help to figure this out. Will need access to the site for that.

          • dentvii April 18, 2012 at 3:11 am #

            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).

            • kento April 18, 2012 at 10:42 am #

              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.

  5. dentvii April 5, 2012 at 2:53 am #


    I have just bought your plugin and I am an amateur at php (sorry about that!). I have 3 questions.

    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.

    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 );

    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?


    Is there any way to make get the result from a PHP execution and then making it lazy load? Thanks

    • dentvii April 5, 2012 at 2:53 am #

      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 );

      • dentvii April 5, 2012 at 2:56 am #

        Can’t past php.
        here is the code snippet


        • dentvii April 5, 2012 at 2:58 am #

          This question 3 worked itself out. Thanks!

          • dentvii April 5, 2012 at 3:43 am #

            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.


          • dentvii April 5, 2012 at 4:03 am #

            On regards the comments, I made it work, but it broke accentuation (á,é) from latin language.

            • kento April 5, 2012 at 6:29 pm #

              Can you send me a link to the page where that happens please?

          • dentvii April 5, 2012 at 10:56 pm #

            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)

            Code being loaded with itthinx

            Page with itthinx loading the ads (only this page is using just for show)

            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

            Basically 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.

            • kento April 7, 2012 at 2:25 pm #

              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.

        • dentvii April 7, 2012 at 6:29 am #

          Maybe I haven’t been clear about what are my goals. Here is a website that lazy loads the Outbrain widget, and the comments.

          • kento April 7, 2012 at 2:34 pm #

            No that’s ok, I see what you’re trying to achieve.

          • dentvii April 7, 2012 at 6:08 pm #

            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.

            WP 3.3.1
            Running on Nginx

            Plugins list and versions

            The Source from Elegant Themes

            My 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

            Without [itthinx-lazyload] but with php API
            (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.

            • kento April 7, 2012 at 7:26 pm #

              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.

          • dentvii April 8, 2012 at 4:44 am #

            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
            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).

            This is my nginx conf file

            And I am running nginx 0.9.4 on php 5.2 with fast cgi and XCache.

            • kento April 8, 2012 at 6:30 pm #

              In both cases you have data-cfasync="false" on the script tag. Remove that and it will work.

          • dentvii April 9, 2012 at 12:19 am #

            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 ( code when I add comments to the lazy load, the code used and the resulting code of the webpage (with the accentuation error

            Anyway, thanks for all the support Kento!

            • kento April 9, 2012 at 11:54 am #

              Thanks dentvii, great to see that working out. I’ll have a look at the encoding issue and let you know.

  6. zach February 24, 2012 at 12:47 am #

    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!

  7. zach February 23, 2012 at 6:23 am #

    Hello I just purchased this and can;t get it to work with a facebook like button. Nothing shows in the div.

    • kento February 23, 2012 at 11:26 am #

      Hi zach, can you please post the code you are using to check it?

      • zach February 23, 2012 at 6:27 pm #

        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.

        • zach February 23, 2012 at 6:28 pm #

          Woops. Looks likt the code was stripped. I am using the php code shown above in the adsense example.

          • kento February 23, 2012 at 10:16 pm #

            Have you followed the steps mentioned here: ? 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.

  8. Nadiar December 28, 2011 at 11:36 pm #

    look , it don’t work at my blog

    my page.php code , here my page.php code

    • kento December 29, 2011 at 5:40 pm #

      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.

  9. Ego Ipse November 29, 2011 at 9:58 pm #

    One more thing: it also changes CSS styles…

    • kento December 2, 2011 at 2:48 pm #

      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 🙂

  10. Ego Ipse November 29, 2011 at 9:57 pm #

    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.

    • kento November 30, 2011 at 12:58 pm #

      Seems to be related to an unsolved issue with some shortcodes, looking into it and hope to get that solved asap.

  11. Sarangan September 16, 2011 at 7:16 am #

    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.

    • kento September 16, 2011 at 9:22 am #

      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.

    • kento September 16, 2011 at 12:42 pm #

      Nested shortcodes are now available with the Itthinx LazyLoader. The update will be distributed to contributors today.

      • Sarangan September 19, 2011 at 3:40 am #

        Thanks a lot 🙂 I’m going to test it today.

      • Sarangan September 19, 2011 at 3:50 am #

        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"]


        [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.

        • kento September 19, 2011 at 8:43 am #

          You need to close the gallery shortcode, for example using the self-closing form:
          [gallery ... /]

          • Sarangan September 19, 2011 at 4:12 pm #

            [itthinx-lazyload][gallery link="file" order="DESC" columns="4" orderby="ID" /][/itthinx-lazyload]

            gives also blank page..

            • kento September 19, 2011 at 7:07 pm #

              You must have a different problem I suppose, please take a look here:


              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.

  12. iPad September 14, 2011 at 3:58 am #

    Can you give me an example with a div in it?

    • kento September 14, 2011 at 10:13 am #

      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().

  13. ipad September 13, 2011 at 8:29 pm #

    i bought the lazy loader, but if i enclose some html code in page.php it don’t work:

    html code


    • kento September 14, 2011 at 12:03 am #

      Hi 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

We use cookies to optimize your experience on our site and assume you're OK with that if you stay.
OK, hide this message.

Affiliates · Contact · Jobs · Terms & Conditions · Privacy Policy · Documentation · Downloads · Useful Plugins · My Account