CODEWITHSUNDEEP
javascripttwitter
kiler129
kiler129

Reputation: 1154

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. Is there any way to add "Loading..." and make it async? (I know about iframe but its awful way)

Upvotes: 2

Views: 2245

Answers (3)

Etienne de Saporta
Etienne de Saporta

Reputation: 1

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.

Upvotes: 0

mehmetilker
mehmetilker

Reputation: 321

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')
    })
  })
})

Upvotes: 1

Federico Cáceres
Federico Cáceres

Reputation: 1216

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.

Upvotes: 0

Related Questions