Question

我正在对我的网站进行最后润色，并且正在努力使页面的负载看起来不那么紧张。向您展示我的意思的最佳方式是显示网站： http://marckremers.com/2011（仍未完成，处于alpha阶段）

正如您所看到的内容粘在左侧，将大量的jquery和图像加载到页面中，然后单击到位（中心）。

我想知道是否有一种方法可以让它先点击到位然后加载元素？

我尝试将重新定位脚本放在后面，甚至没有用。

有什么想法吗？感谢

Answer 1

使用您拥有的所有图片，您的网页 1.5mb ，再加上 70 http请求。难怪你的网站表现得像它那样。

您应该在较小的图像上使用精灵来减少http请求，并且就大图像而言，您一次加载所有图片。即使是那些没有立即显示的。在页面加载后，应立即通过AJAX拉入未立即显示的图像。

如果你想进一步优化，我也会：

我可以在这里重新发明网站最佳实践轮，或者我可以将您发送到Yahoo best practices for web site optimization那里有大量非常重要的信息，请阅读并参考。

Answer 2

您加载了jQuery两次，一次来自您自己的网站，另一次来自Google的CDN。对于初学者，您应该将所有JavaScript移动到HTML的底部。然后，您需要优化处理要显示的列数以及Google Maps iframe的if ... else。

为了加快视觉效果，而不是使用jQuery，你可能应该有一些vanilla DOM脚本，为projects和tb_tweets类动态创建一些CSS样式，所以它不需要在处理projects和tb_tweets。

的大小调整之前，请等待所有JavaScript加载

Answer 3

使用http://mir.aculo.us/dom-monster/并执行它告诉您的所有操作。如果您希望工具能够弄清楚页面加载过程中发生了什么，那么Chrome开发人员工具可以为客户端优化提供最好的工具。

Answer 4

认为你可以做的是将你的javascript函数放在document.ready（function（））中，这样函数将在页面加载后加载。我想你不需要加载网站的功能，只是为了与它进行交互？

Answer 5

通常，您只想在页面呈现后触发事件，即使用

$(document).ready(function()) {
   //your javascript goes here
}

然后，在您的HTML中，您有占位符，因此页面不会像您放置的那样“展开”或“跳转”，并且某种迹象表明该元素仍在加载。然后，当您的ajax请求完成时，只需使用ajax响应填充占位符。