如何防止用户在使用jQuery UI和RequireJs时看到“丑陋”的HTML前体

How to keep user from seeing "ugly" HTML precursor when using jQuery UI and RequireJs?

本文关键字：丑陋 前体 HTML RequireJs 用户 何防止 UI jQuery      更新时间：2023-09-26

我正在尝试调整jquery-ui代码库以使用RequireJs，并且我正在将其部署在比我以前使用的专用主机慢得多(但可扩展(的虚拟化云服务上。

默认情况下，我的页面是普通HTML的丑陋灾难。 唯一使这种混乱栩栩如生的是调用JavaScript函数，这些函数为其提供了适当的选项卡控件和布局。 事实上，页面布局很长且垂直...一个接一个的部分...在我调用.tabs()函数之前，该函数将它们折叠成一个带有水平控制的单元。

(相当自信，我在jQuery UI思维方式中"做对了"。 通过不通过代码构建整个UI，至少可以在禁用JavaScript的情况下查看它。 虽然我怀疑有人仍在使用 Lynx，但存在可访问性问题......或者确保您的内容可由搜索引擎分析。 我就不说我老人家的演讲了，说这是一种实现内容/UI分离的荒谬方式。 :-/)

当我使用 <script> 标签加载我的第三方库依赖项和运行 jQuery UI voodoo 的$(document).ready时，用户从未见过原版丑陋的 HTML。 现在我正在使用 RequireJs，page.js文件滞后并在 HTML 之后异步加载......等待 DOMready 处理并不真正需要的库。 较慢的服务器使这看起来非常糟糕。

我当然可以使用CSS样式在一开始隐藏丑陋，并覆盖"正在加载..."图形，直到 UI 准备就绪。 这是首先想到的，这里建议采用类似的方法：

Jquery UI界面在document.ready之前看起来很丑陋

(注意：这似乎是一个常见问题，我几乎认为会有一个 RequireJs 插件继续这样做。 有吗？

无论如何，我以前似乎不必担心这一点......我想知道我是否缺少一些更简单的解决方案。 如果您使用的是 RequireJs，如何防止用户看到"丑陋"的 HTML？

我和你在一起，你应该做一些CSS魔法，然后在RequireJs的"kick it off"脚本中隐藏它。 您还应该考虑 SEO 影响和禁用 JavaScript 的方案。

请记住，归根结底，它只是HTML，CSS和JavaScript。 无论你使用什么模板/代码生成系统来让你到达那里，归根结底，它只是HTML内容，用CSS样式化，用JavaScript动画。

我认为

使用node-browserify之类的东西来完成所有Javascript模块require s，然后将单个JS文件流式传输到最终用户更有意义。

当客户端显然不打算在离线模式下运行时，为什么要通过所有 TCP 握手和 HTTP 标头以低得多的性能获得相同的内容？

嘿，医生，当我这样做时很痛。

好吧，那就不要那样做！

我在Jquery Mobile和RequireJS上遇到了同样的问题。

我首先尝试遵循此提示，并通过添加CSS隐藏"丑陋的HTML"： 

.requireJS-init { visibility: hidden;}
.requireJS-init.done { visibility: visible;}
并在

页面启动时辅助 .requireJS-init，并在加载完所有内容后通过添加另一个完成的类将其删除(我猜您也可以删除初始类(。

但是，这会导致两个问题：
1.用户可能会有一段时间的空白页面，具体取决于您正在加载
的内容2. IE8 失败了，因为(就我而言(Jquery Mobile 试图在元素仍然隐藏时专注于它们。

我尝试将类形式HTML移动到BODY到保存页面内容的元素，但没有任何效果。

一个更简单的纯CSS解决方案是这样的：

.ui-mobile-rendering:before { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0;         
    left: 0; 
    right: 0; 
    display: block; 
    height: 100%; 
    z-index: 0; 
    background:#fff url(../images/ajax-loader.gif) no-repeat center center; 
    content: "" 
    }

ui-mobile-render类在主体上，而JQM做它的widget增强。页面完成后，将删除该类。通过添加全屏 ：before(在本例中为 JQM 加载器作为背景图像(，您可以隐藏页面上的所有内容，直到呈现为止。无需可见性：隐藏，IE8 不会抱怨(谢天谢地，IE8 和 FF3.6 知道：之前(。

相关文章：