Question

Twitter生成我要在页面上插入的盒子代码：http://pastebin.com/5TgkL5vP但是在连接速度慢的情况下会阻止页面加载。有没有办法添加“加载...”并使其异步？（我知道iframe，但它的方式很糟糕）

Answer 1

这里有一个解决方案; 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')
    })
  })
})

Answer 2

要延迟加载twitter小部件，您可以在加载整个页面后加载它。一旦下载了页面，您就可以使用window's onload event handler开始加载推特小部件。

或者，您可以使用javascript库（如jquery）在加载HTML后运行该代码，但图像和CSS以及其他资源仍在加载：jquery's .ready() method就是这样。

如果您不想使用裸javascript（虽然建议学习），jquery（和其他人一样）确实提供了一个.load()事件，其行为就像W3c上的onload示例一样。

在任何情况下，使用这两种方法中的任何一种，您都可以在占位符中放置“loading ...”文本，然后在加载后将其替换为小部件。

您应该尝试使用两者并查看哪一个产生最佳感知结果。有时您希望页面的内容加载速度极快，在这种情况下，您应该保留所有外部内容，直到加载内容为止（使用onload或.load()），而有时您希望所有内容都是或多或少地同时加载（使用.ready()）。

我希望它不会倒退：D。

Answer 3

od-eon.com的解决方案是正常的但是对于IE，CSS没有正确添加，因为它试图在窗口onload事件中添加CSS。此事件是异步触发的，因此不会添加任何CSS。

第$('#twtr-widget-1').appendTo('#twitter_p')行没用。

您不能将CSS位置属性添加到包含该框的div中，因为在这种情况下不会显示任何内容。如果你想在绝对div中添加这个框，你必须在其中添加一个空div并在参数中传递div的id。

Twitter社交盒延迟页面加载 - 如何异步呢？

3 个答案: