Twitter social box delay page loading - how to async it?

Twitter generates me box code to insert on page: http://pastebin.com/5TgkL5vP but on slow connection it prevent page from loading.开发者_JS百科 Is there any way to add "Loading..." and make it async? (I know about iframe but its awful way)

---

There is a solution in here; http://od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets/

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

---

To delay the loading of the twitter widget you could load it after your whole page is loaded. You could use the window's onload event handler to start loading the twitter widget once your page has been downloaded.

Or you could use a javascript library (like jquery) to run that code once you HTML is loaded but images and CSS and other assets are still loading: jquery's .ready() method does just that.

In case you don't want to use bare javascript (although recommended for learning) jquery (like others) does provide a .load() event that behaves just like the onload example on W3c.

In any case, with any of those two methods you could place a "loading..." text in a placeholder and then replace it with the widget once it's loaded.

You should try experimenting with both and see which one produces the best perceived results. Sometimes you want the page's content to load blazingly fast, in that case you should hold all external content from being loaded until the content is loaded (using onload or .load()), while sometimes you want everything to be loaded more or less at the same time (using .ready()).

I hope it didn't come out backwards :D.

---

The solution explain by od-eon.com is OK but for IE the CSS is not correctly added because it tries to add CSS in a window onload event. This event is fired asynchronously so no CSS is added.

The line $('#twtr-widget-1').appendTo('#twitter_p') is not useful.

You must not add a CSS position attribute to the div which will contain the box because nothing is displayed in this case. If you want to add this box in an absolute div you must add an empty div in it and pass the div's id in parameter.