Jquery / JavaScript —如何从视觉上优化我的网站负载？
我正在对我的网站进行最后的润色，并努力让页面的负载看起来不那么跳跃。向您展示我的意思的最佳方式是展示该网站： http://marckremers.com/2011 （尚未完成，处于 alpha 阶段）
正如您所看到的内容在左侧，将大量 jquery 和图像加载到页面中，然后单击到位（中心）。
我想知道是否有办法让它先点击到位，然后加载元素？
我尝试将重新定位脚本放在之后，但即使这样也不起作用。
有什么想法吗？谢谢
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)
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.
Any ideas? Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
对于您拥有的所有图像，您的页面大小为 1.5mb，再加上 70 个 http 请求。难怪您的网站会如此运作。
您应该在较小的图像上使用精灵来减少 http 请求，并且就大图像而言，您将立即加载所有图片。即使是那些没有立即显示的内容。未立即显示的图像应在页面加载后通过 AJAX 拉入。
如果您想进一步优化，我还会：
它增加了尺寸，但我赞成
通过http请求。
我可以在这里重新发明网站最佳实践轮，或者我可以将您发送到 Yahoo 网站最佳实践优化 那里有大量非常重要的信息，请阅读并参考。
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.
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:
it increases size, but I favor that
over http requests.
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 两次，一次从您自己的站点加载，另一次从 Google 的 CDN 加载。对于初学者来说，您可能应该将所有 JavaScript 移至 HTML 的底部。然后，您需要优化处理要显示的列数和 Google 地图 iframe 的
if ... else。为了加快视觉速度，您可能应该使用一些普通的 DOM 脚本来为
projects和tb_tweets类动态创建一些 CSS 样式，而不是使用 jQuery，所以它不会在处理projects和tb_tweets大小调整之前，不必等待所有 JavaScript 加载完毕。You loaded jQuery twice, once from your own site and another time from Google's CDN. For starters, you should probably move all the JavaScript to the bottom of your HTML. Then you need to optimize your
if ... elsethat handles how many columns to display and your Google Maps iframe.To speed the visual up, instead of using jQuery, you should probably have some vanilla DOM scripting that dynamically creates some CSS styles for the
projectsandtb_tweetsclasses, so it doesn't have to wait for all your JavaScript to load before handling resizing of yourprojectsandtb_tweets.使用 http://mir.aculo.us/dom-monster/ 并执行其指示的所有操作你要做的。如果您希望使用工具来了解页面加载期间发生的情况，那么 Chrome 开发人员工具无疑是客户端优化的最佳工具。
use http://mir.aculo.us/dom-monster/ and do everything it tells you to do. If you want tools to figure out what is going on during page load, the chrome developer tools are hands down the best out there for client side optimization.
您可以做的一个想法是将您的 javascript 函数放入 document.ready(function()) 中，这样函数将在页面加载后加载。我想您不需要加载网站的功能，只是为了与之交互？
A think you could do is put your javascript functions in the document.ready(function()), this way the functions will be loaded AFTER the page is loaded. I guess you don't need the functions for loading the site, just to interact with it?
一般来说，您只想在页面呈现后触发事件，即使用“
然后”，在您的 HTML 中您有占位符，这样页面就不会像您放置的那样“扩展”或“跳转”，并以某种指示该元素仍在加载中。然后，当您的 ajax 请求完成时，只需使用 ajax 响应填充占位符即可。
Generally you only want to trigger your events after the page has rendered, i.e., using
Then, in your HTML you have placeholders so the page doesn't "expand" or "jump" as you put, with some kind of indication that the element is still loading. Then, when your ajax requests complete, simply populate the placeholders with the ajax response.