jQuery/Javascript —如何在视觉上优化我的网站负载? [英] Jquery / Javascript — How to optimise my site load visually?

问题描述

我正在对我的网站进行最后润色，并且正在努力使页面的加载看起来不那么跳跃.告诉我我的意思的最好方法是显示该网站: http://marckremers.com/2011 (仍未完成，处于Alpha阶段)

I'm making finishing touches on my site and am struggling to make the load of the page look less jumpy. best way to show you what i mean is to show the site: http://marckremers.com/2011 (Still not complete, in alpha phase)

您可以看到内容停留在左侧，将大量的jQuery和图像加载到页面中，然后单击到位(中心).

As you can see the contents sticks to the left, loads a ton of jquery and images into the page, and only then click into place (centre).

我想知道是否有一种方法可以使其首先单击就位，然后再加载元素?

I'm wondering if there is a way i can make it click into place first and then load the elements?

我尝试将重定位脚本放在，甚至不行.

I tried putting the reposition script just after , not even that works.

有什么想法吗?谢谢

推荐答案

包含所有图像，您的页面为 1.5mb ，并带有 70 http请求.难怪您的网站会表现出这种行为.

With all of the images you have, your page is 1.5mb, coupled with 70 http requests. No wonder your site behaves the way it does.

您应该在较小的图像上使用Sprite来减少http请求，而就较大的图像而言，您要一次加载所有图像.即使是没有立即显示的内容.页面加载后，应立即通过AJAX提取未立即显示的图像.

You should be using sprites on the smaller images to reduce http requests and as far as the large images go, you are loading all of the pictures at once. Even the ones that aren't displayed right away. The images that aren't displayed right away should be pulled in via AJAX after the page loads.

如果您想进一步优化，我也会:

If you want to go further into optimization I would also:

• 使用一个外部javascript文件.是的 它增加了大小，但我赞成 通过http请求.
• 缩小您的html/javascript/css.
• 不要在您的网站上托管jQuery，请使用CDN，例如 Google APIS .
• 签出与Amazon S3类似的服务.

• Use one external javascript file. Yes it increases size, but I favor that over http requests.
• Minify your html/javascript/css.
• Don't host jQuery on your site, use a CDN such as Google APIS.
• Check out a service similiar to Amazon S3.

我可以在此处重塑网站最佳实践，也可以将您发送到 Yahoo最佳实践用于网站优化那里有很多非常重要的信息，请阅读并参考.

I could reinvent the web site best practices wheel here, or I could send you to Yahoo best practices for web site optimization There is a ton of very important information there, read it and reference it.

这篇关于jQuery/Javascript —如何在视觉上优化我的网站负载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！