如何添加直到稍后才被解析的HTML元素？

Question

我正在制作一个网页，并想在加载之前显示一个预加载器。我只希望浏览器解析我的第一个<head>标记，其余的被忽略。这将是理想的：

<head>  
  <script src='preloader.js'></script>  
  <script src='more1.js' ignore='true'></script>  
  <script src='more2.js' ignore='true'></script>  
  <script src='more3.js' ignore='true'></script>  
</head>

这驱使我想知道怎么可能在我的页面上有现有的，潜在的超文本标记语言标签，然后我用JavaScript标记它们来激活它们，比如取消注释它们。我以为注释代码就是答案，但我无法从jQuery的DOM中读取我的HTML注释。

如何创建稍后激活的潜在HTML？

我不是想要：

• 具有有效的超文本标记语言。
• 插入驻留在其自身文件之外的超文本标记语言内容(更改内容，如属性也可以)。
• 取消隐藏任何已分析的内容。

Answer 1

您需要澄清一点:您希望HTML不被解析还是不被显示？

如果您不希望它被解析，可以在脚本元素中的JavaScript字符串中将其提取出来：

<script type="text/javascript">
/* <![CDATA[ */

var yourHTML = '<div id="whatever">...</div>';

/* ]]> */
</script>

如果您不想显示它，可以在内联样式上设置display:none (这可以防止可能出现的任何问题)：

<div id="whatever" style="display: none;">...</div>

在这两种情况下，您都可以稍后使用jQuery分别使用$(yourHTML)和$('#whatever')访问节点。

Answer 2

一种选择是使用javascript将内容添加到dom。

由于您使用的是jquery，因此可以执行以下操作：

var aThingToAddLater = $('<div class="myNewDiv">div content</div>');

$("body").append(aThingToAddLater); // <-- this will add it to the dom, specifically as the last element of the body

这样，真正的“直到稍后才被解析”的内容将是javascript代码。

Answer 3

首先，如果你需要为你的网页预加载器，我认为你做得不对。但话又说回来，我不知道整个上下文，可能有一些情况下，预加载器是合理的。

您是否尝试过简单地将display设置为none，然后在页面就绪时显示代码？例如。

<div class="preloader">...</div>
<div class="main" style="display: none">...</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(".main").show();
    });
</script>

如果你想正常工作，你可能还需要在发送preloader-div之后刷新been服务器的输出缓冲区。在PHP中，它将如下所示：

<div class="preloader">...</div>
<?php
    flush();
?>
...