Asynchronous loading of widget javascript

[uglymugagency]

I’m looking for a way to defer the loading or asynchronously load the widget.js on my wordpress widget. any clues how would be greatly appreciated. Especially when it comes to trying to make a mobile website load faster. here’s a copy of the widget code:

  <script src="http://widgets.twimg.com/j/2/widget.js"></script> 
  <script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 5,
  interval: 10000,
  width: 250,
  height: 280,
  theme: {
    shell: {
      background: '#576f73',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',

      color: '#000000',
      links: '#eb0707'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: false,
    avatars: false,
    behavior: 'default'
  }
}).render().setUser('randpc').start();
</script> 

[clearnfree]

Use jQuery to delay loading the widget script file until the page has loaded. Put the following script before the closing tag on your site’s pages. You could use the wp_footer hook for that, or put it directly in your theme’s footer.php file.

[PrttyGrtty]

@clearnfree that just throws an error as the class (function/object) “TWTR.Widget” does not yet exist

[4ty_fr]

I have found a solution hier : http://od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets/
and it works (for me only if the div twitter_div does not have an absolute position)

edit: I have a problem with IE because CSS is not set

[4ty_fr]

I use this good solution for async load (od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets/) but for IE widget.js try to append the css in a window onload event. In async load the load is complete so nothing is added.

The problem is in this part of JS :
// oh IE we love you.
// this is needed because you can’t modify document body when page is loading
if (!browser.ie || isLoaded) {
append();
}
else {
window.attachEvent(‘onload’, function() {
isLoaded = true;
append();
});
}

I thing a good solution is given here (stackoverflow.com/questions/978740/javascript-how-to-detect-if-document-has-loaded-ie-7-firefox-3) :
// oh IE we love you.
// this is needed because you can’t modify document body when page is loading
if (!browser.ie || isLoaded || (document.readyState === “complete”)) {
append();
}
else {
window.attachEvent(‘onload’, function() {
isLoaded = true;
append();
});
}

If someone from twitter can correct this bug he will propably solve this problem in the same time : https://dev.twitter.com/discussions/2889

[el_venezolano20]

html

[dricathe]

background: ‘#576f73’,

[closdesign]

I recently asked a Twitter Advocate at Twitter @kurrik about using http://widgets.twimg.com/j/2/widget.js.

BAD NEWS ALL, he told me that this will start to break. He recommended using the new embedded timeline.

[gausarts]

@clodesign thanks for the info. That is unfortunate. That widget is more customizable than the timeline. May I know if any official statement that explains that?

[gausarts]

@gausarts I just noticed twitter warning in Firebug with the page using that widget:
TWITTER WIDGET: This widget is being deprecated, and will cease functioning soon. https://twitter.com/support/status/307211042121973760

[closdesign]

@gausarts, yep, I am not very happy about it because of the lack of control and customization, but I guess that is what we get.

[YahmanCobain]

I’m @yahmancobain l’m a twitter member. Please follow my twitter !

[misrstars]

I used the following code, the twitter button worked and then tested page speed service it gave me no error of ansync loading
code :

example page :
http://www.nmisr.com/vb/showthread.php?t=494316

[Whitebrow]

This is what I used and it works like a charm.
Try setting the delay to 5000ms just to test it works

setTimeout(function() { !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); }, 0);

[juancasasloza2]

Juan

[001easytricks]

I am using asynchronous javascript and it works properly in IE, Firefox, Google Chrome etc. The Javascript that I am using on my website 001 Easy Tricks is…

[niall]

[niall]