Itthinx LazyLoader Manual

—

by

Kento
in ,

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”

  1. Felipe Veiga Avatar
    Felipe Veiga

    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!

    Reply
    1. kento Avatar
      kento

      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

      Reply
  2. Simon Avatar
    Simon

    Hi Kento, damn, it looks like your plugin is not compatible with head.js

    http://headjs.com/

    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.

    Reply
    1. kento Avatar
      kento

      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.

      Reply
  3. Simon Avatar
    Simon

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

    Reply
    1. kento Avatar
      kento

      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?

      Reply
  4. dentvii Avatar
    dentvii

    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

    Reply
    1. kento Avatar
      kento

      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.

      Reply
      1. Felipe Veiga Avatar
        Felipe Veiga

        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?

        Reply
        1. kento Avatar
          kento

          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.

          Reply
          1. dentvii Avatar
            dentvii

            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?

            Reply
            1. kento Avatar
              kento

              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?

              Reply
      2. dentvii Avatar
        dentvii

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

        Reply
        1. kento Avatar
          kento

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

          Reply
          1. dentvii Avatar
            dentvii

            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!

            Reply
            1. kento Avatar
              kento

              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.

              Reply
  5. dentvii Avatar
    dentvii

    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

    Reply
    1. dentvii Avatar
      dentvii

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

      Reply
      1. dentvii Avatar
        dentvii

        Can’t past php.
        here is the code snippet http://snipt.org/uhahd7

        Thanks!

        Reply
        1. dentvii Avatar
          dentvii

          This question 3 worked itself out. Thanks!

          Reply
          1. dentvii Avatar
            dentvii

            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.

            http://snipt.org/uhahe7

            Reply
          2. dentvii Avatar
            dentvii

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

            Reply
            1. kento Avatar
              kento

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

              Reply
          3. dentvii Avatar
            dentvii

            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#expand

            Page 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#expand

            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.

            Reply
            1. kento Avatar
              kento

              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.

              Reply
        2. dentvii Avatar
          dentvii

          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

          Reply
          1. kento Avatar
            kento

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

            Reply
          2. dentvii Avatar
            dentvii

            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 Nginx

            Plugins list and versions
            http://snipt.org/uhoi9#expand

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

            Reply
            1. kento Avatar
              kento

              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.

              Reply
          3. dentvii Avatar
            dentvii

            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#expand

            This is my nginx conf file
            http://snipt.org/uhrd0#expand

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

            Reply
            1. kento Avatar
              kento

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

              Reply
          4. dentvii Avatar
            dentvii

            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!

            Reply
            1. kento Avatar
              kento

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

              Reply
  6. zach Avatar
    zach

    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!

    Reply
  7. zach Avatar
    zach

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

    Reply
    1. kento Avatar
      kento

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

      Reply
      1. zach Avatar
        zach

        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.

        Reply
        1. zach Avatar
          zach

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

          Reply
          1. kento Avatar
            kento

            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.

            Reply
  8. Nadiar Avatar
    Nadiar

    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

    Reply
    1. kento Avatar
      kento

      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.

      Reply
  9. Ego Ipse Avatar
    Ego Ipse

    One more thing: it also changes CSS styles…

    Reply
    1. kento Avatar
      kento

      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 🙂

      Reply
  10. Ego Ipse Avatar
    Ego Ipse

    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.

    Reply
    1. kento Avatar
      kento

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

      Reply
  11. Sarangan Avatar
    Sarangan

    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.

    Reply
    1. kento Avatar
      kento

      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.

      Reply
    2. kento Avatar
      kento

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

      Reply
      1. Sarangan Avatar
        Sarangan

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

        Reply
      2. Sarangan Avatar
        Sarangan

        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.

        Reply
        1. kento Avatar
          kento

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

          Reply
          1. Sarangan Avatar
            Sarangan

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

            gives also blank page..

            Reply
            1. kento Avatar
              kento

              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.

              Reply
  12. iPad Avatar
    iPad

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

    Reply
    1. kento Avatar
      kento

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

      Reply
  13. ipad Avatar
    ipad

    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,
    tobias

    Reply
    1. kento Avatar
      kento

      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.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Share