有没有办法在加载 JavaScript 之前不加载 html？答案

【问题标题】：Is there a way to not load html until JavaScript loads?有没有办法在加载 JavaScript 之前不加载 html？
【发布时间】：2018-10-29 19:36:31
【问题描述】：

我想确保所有 JavaScript 在页面加载之前发生。我正在更改一些 innerhtml，但不希望显示原始的 innerhtml。

目前，当我的页面加载时，“书籍”会显示片刻，然后最终在阅读脚本时，它会被替换。如何防止它显示初始文本？

仅供参考，脚本存在于 php 文件中。

<?php
?>
<script>
function changeme(){
var myvar = "test-string-is-long-to-notice-the-changed-text";
var spans = document.getElementsByTagName("span");
for(var i=0;i<spans.length; i++) {
if(spans[i].textContent.trim().toLowerCase()==="books") {       //is this the "Welcome" span?
spans[i].innerHTML = myvar;  //change to new value
break;                                  //hop out of the loop, we're done
}
 }
 }
 window.onload = function() {
 changeme();
 };
</script>

【问题讨论】：

如果页面的默认内容在页面加载后总是要更改，那么您需要重新考虑更改默认内容，而不是每次都动态更改。这个概念是您的默认显示应该是您希望页面显示的内容。任何额外的东西都应该是用户交互或插件应用的结果。但不是一个完整的销售，总是在页面加载时将 X 更改为 Y。只需从 Y 开始，不要强迫您的用户进行该处理。

标签： javascript php jquery html wordpress

【解决方案1】：

在 HTML 之前加载 JS 不是一个好主意，因为在使用 js 加载之前您无法更改 HTML 元素。

解决方案1：最初，将您不想显示的html标签保留为空，因为您想显示来自JS的新数据。

解决方案 2：最初，保留这些元素的样式“显示：无”，并在使用元素中的 Js 添加数据时。更新要显示的样式：'block' 或您想要的任何其他样式，例如 spans[i].style.display = 'block';。

【讨论】：

解决方案 2 在我看来更好。这样，它对您当前的应用程序的更改就更少了。例如，有两个 Dom 元素（假设是两个 DIV s）一个专用于您的“书籍”，其样式为 style.display="none"。这必须在 CSS 的一开始就发生，并且不应该被覆盖。也许将其设置为元素的 ID。然后在页面加载完成时，在加载结束时，您可以将显示更改为“块”以显示最终的元素集。在这一切进行的同时，为了获得更好的用户体验，向用户显示“正在加载...”DIV 元素。

【解决方案2】：

您不能将 JS 应用于尚不存在的 html 文档。您的 html 总是先加载，然后再应用您的 JS。您在这里可能看到的是 html 已加载，而 JS 正在花费一秒钟的时间来加载并进行更改？我建议找出一种更有效的方法来实现您需要的 JS。您可能只是看到 JS 延迟。您可以使用更高效的实现加上一些 CSS 来修复它。我在这里可能是错的，但是将 JS 应用于 html 是没有意义的，即使 html 还没有。

如果我在浏览器解析和呈现我的 html 之前尝试这样做，我将如何应用任何 JS？

还要记住，PHP 总是先“加载”，然后是 html，然后是 JS

【讨论】：