Home » Odeon Blogs » Stefan Talpalaru, CTO »

asynchronous loading of twitter widgets

asynchronous loading of twitter widgets

By default, the twitter widget you see in this site's footer is blocking the page while loading. The duration added to the total page load depends on a 3rd party site's performance (widgets.twimg.com) and that's something we want to avoid. Our usual approach is to load the remote javascript asynchronously after all the other elements have been loaded, like this:

  1. $(window).load(function(){
  2. $.getScript('http://widgets.twimg.com/j/2/widget.js', function(){
  3. $.getScript('/media/js/twitter.js', function(){
  4. $('#twtr-widget-1').appendTo('#twitter_p')
  5. })
  6. })
  7. })

In /media/js/twitter.js we have something like TWTR.Widget({...}).render().setUser('odeoncg').start() [options omitted] so we load that after we have http://widgets.twimg.com/j/2/widget.js and all should be fine, right? Wrong. The page is reloaded and blanked. What causes this strange behavior is a call to document.write() somewhere so let's hunt it down by looking at twitter's code. Luckily, they provide an uncompressed and documented version at http://twitter.com/javascripts/widgets/widget.js where we can see these lines:

  1. if (!opts.id) {
  2. document.write('<div class="twtr-widget" id="' + this.id + '"></div>');
  3. }

That opts.id is an undocumented option that let's us specify the id of an existing empty div and bypass the document.write() so we do just that:
- add <div id="twitter_div"></div> in our html
- add id: 'twitter_div' to the hash passed to TWTR.Widget()
And now it works as expected. If the whale gets tired the widget will show up late (or never) but our page will load on time regardless.


Category: Javascript

Discussion

  1. Just what i needed for http://www.gemagema.tv, thaks.


  2. Worked like a champ. Thanks so much!


  3. Nice work, now do it without jquery :)


  4. Josh Brewer on Apr 25, 2011 - 16:51 said:

    You are the man


  5. Suze on May 09, 2011 - 12:07 said:

    Wicked, worked a treat, thank you. Now on with twitter anywhere


  6. Thanks, this helped us out a lot!


  7. Hi! I'm a bit of a newbie so I couldn't really put it all together from your post. I tried this but it didn't work:

    <code>&lt;script type=&quot;text/javascript&quot;&gt;
    $(window).load(function(){
    $.getScript(&#x27;http://widgets.twimg.com/j/2/widget.js&#x27;, function(){
    $.getScript(&#x27;/media/js/twitter.js&#x27;, function(){
    $(&#x27;#twtr-widget-1&#x27;).appendTo(&#x27;#twitter_p&#x27;)
    })
    })
    })
    &lt;/script&gt;
    &lt;script&gt;
    new TWTR.Widget({
    id: &#x27;twitter_div&#x27;,
    ...
    &lt;/script&gt;
    &lt;/body&gt;</code>

    I would appreciate it if you could point me in the right direction, thanks!


  8. Whoops, the code got mangled. I posted it here instead: http://pastebin.com/f504Sxq9


  9. you save my life man!
    thanks a lot!


  10. That is exactly what I've been trying to do. Nice :) - cut the page load time in half!


  11. amazing!!! i've been looking for a solution for hours!


  12. This is exactly what I was looking for. It works a treat on my website http://www.coolest-guy-on-the-planet.co.uk/

    Thanks very much.


  13. Cool, just what i needed.


  14. Dan on Feb 13, 2012 - 15:46 said:

    Thanks a lot.


  15. Thanks, works a charm :-)


  16. And a thank you to the coolest guy on the planet for his "loading tweets..." idea :-)


  17. You know, that's just awesome! Thanks! Saved me some time figuring it out, which is awesome (I didn't want to waste time on this!)

    :)


  18. Free Movie Download on Jun 22, 2012 - 14:44 said:

    ya the below script is easier
    <script type="text/javascript">// <![CDATA[
    (function() {
    var twitterScriptTag = document.createElement('script');
    twitterScriptTag.type = 'text/javascript';
    twitterScriptTag.async = true;
    twitterScriptTag.src = 'http://platform.twitter.com/widgets.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(twitterScriptTag, s);
    })();
    // ]]></script>


  19. I have found a problem with IE because CSS is added in a window onload event but nothing append because load is already complete.


  20. As a newbie I also can't put it together based on your post. Would it be possible to post the exact example code? Thanks a lot.


  21. Even simpler than sample code. You just have to follow these 2 instructions:

    - add <div id="twitter_div"></div> in our html
    - add id: 'twitter_div' to the hash passed to TWTR.Widget()


  22. Himanshu Verma on Aug 31, 2012 - 6:08 said:

    Thank a Lot........


  23. No on Mar 13, 2013 - 5:30 said:

    Not helping that much :(


  24. My solution:
    $(document).ready(function(){
    setTimeout(gettwitter,5000);
    });
    function gettwitter() {
    if ($('head #twitter-jstimeline').length){ $('head #twitter-jstimeline').remove();}
    var twitter_timeline = "<script src='//platform.twitter.com/widgets.js' id='twitter-jstimeline'></script>";
    $('head').append(twitter_timeline);
    };




Leave a Comment :

(required)


(required)




(required)








Page generated in: 0.24s