asynchronous loading of widget javascript

uglymugagency
@uglymugagency E.R. Flynn: Creative

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:

  1.   <script src="http://widgets.twimg.com/j/2/widget.js"></script> 
  2.   <script>
  3. new TWTR.Widget({
  4.   version: 2,
  5.   type: 'profile',
  6.   rpp: 5,
  7.   interval: 10000,
  8.   width: 250,
  9.   height: 280,
  10.   theme: {
  11.     shell: {
  12.       background: '#576f73',
  13.       color: '#ffffff'
  14.     },
  15.     tweets: {
  16.       background: '#ffffff',
  17.  
  18.       color: '#000000',
  19.       links: '#eb0707'
  20.     }
  21.   },
  22.   features: {
  23.     scrollbar: false,
  24.     loop: true,
  25.     live: true,
  26.     hashtags: true,
  27.     timestamp: false,
  28.     avatars: false,
  29.     behavior: 'default'
  30.   }
  31. }).render().setUser('randpc').start();
  32. </script> 
2 years 24 weeks ago

Replies

clearnfree
@clearnfree Bryan Smith

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.

  1. <script>
  2.         jQuery(document).ready( function( ) {
  3.             // Load Twitter widget script
  4.             jQuery.getScript('http://widgets.twimg.com/j/2/widget.js');
  5.         });
  6. </script>
2 years 22 weeks ago
PrttyGrtty
@PrttyGrtty Thomas Yuill

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

2 years 4 weeks ago
4ty_fr
@4ty_fr Forty

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

1 year 41 weeks ago
4ty_fr
@4ty_fr Forty

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

1 year 41 weeks ago
el_venezolano20
@el_venezolano20 Sneider Espinoza

html

1 year 20 weeks ago
dricathe

background: '#576f73',

1 year 2 weeks ago
closdesign
@closdesign 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.

1 year 2 weeks ago
gausarts
@gausarts gaus surahman

@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?

1 year 3 days ago
gausarts
@gausarts gaus surahman

@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>

1 year 3 days ago
closdesign
@closdesign 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.

51 weeks 6 days ago
YahmanCobain
@YahmanCobain Yahman Cobain

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

48 weeks 8 hours ago
misrstars
@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 :

$(window).load(function () {
$.getScript('http://platform.twitter.com/widgets.js');
});

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

39 weeks 3 days ago
Whitebrow
@Whitebrow Martin

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

  1. setTimeout(function() {
  2.  !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');
  3. }, 0);
37 weeks 2 days ago