加载 jQuery UI 模板时令人讨厌的延迟答案

【问题标题】：Annoying lag when jQuery UI template is loading加载 jQuery UI 模板时令人讨厌的延迟
【发布时间】：2013-01-31 06:05:48
【问题描述】：

我有使用 jQuery UI 元素（主要是按钮）的网络服务。

我在 document.ready() 中编写所有代码，部分代码是单独的 js 文件。当所有按钮都具有丑陋的 html 默认样式时，让我感到愤怒的是从开始加载页面到加载结束之间的 0.5 秒。我没有在其他网页上看到它，所以我认为我做错了什么......

如何预防？

$(document).ready(function() {

   $("#radio").buttonset();
   $("#mapcontrols").buttonset();
}

【问题讨论】：

您是否先加载了很多大图像或内容 - 您的按钮只有在页面完全加载完成后才会设置样式
@Pete - 你在想$(document).load()。 Ready 在 DOM 加载时触发，在图像加载之前
啊，是的，但它仍然会等到您的文档准备好，所以如果页面上的某些内容需要一段时间来处理，那么在完成之前不会设置按钮样式
是的。页面需要触发谷歌地图应用程序，这需要一段时间......

标签： jquery jquery-ui layout

【解决方案1】：

您在 DOM 加载时隐藏它们，并在所有设置后显示它们。

$(window).load(function() { // will fire handler when all content on document is on position
   $(".radio, .mapcontrols").hide().buttonset(); // first hide and then apply method buttonset() to it
   $(".radio, .mapcontrols").fadeIn();
});

如果您有多个按钮，请使用类。

【讨论】：