css - 将 div 的内容移动到代码底部

Question

在我目前正在处理的网站上，我有一个加载缓慢的 div，导致页面加载缓慢，但也会跳转，因为直到这个缓慢的 div 加载后，才会加载所有位置元素。我无法控制此 div 的内容，因为 div 的内容来自外部来源。所以我想知道我是否可以将此 div 的内容移动到我的代码底部，以便它在我的页面的其余部分之后加载，同时仍将内容的位置保持在网页的同一位置？类似于人们对一些 java 脚本代码所做的事情。

Answer 1

您可以使用 CSS 来定位 div 并将其放在最后。或者 javascript 实际上是个好主意，在 window.onload() 函数中加载内容。

Answer 2

您可以找到 2 个 div - 一个在它应该在的位置，第二个在页面底部。这两个元素最初都应该不显示。加载页面后，将使用 JavaScript 将“伪”div 的内部内容复制到您需要的 div 并为此制作显示块。

Answer 3

就像谢尔盖说的那样做

头窗口中的 javascript.onLoad = function() { switchDivs(); }

HTML 上面你想要内容的地方

<div id="whereYouWantIt"></div>

页面其余部分的更多 HTML

<div id="contentIsInHere"></div>

这里的javascript用于切换内容的功能。可选择在此处调用包含此函数的外部脚本。

<script> 
function switchDivs() {
  document.getElementById("whereYouWantIt").innerHTML = document.getElementById("contentIsInHere").innerHTML;
  document.getElementById("contentIsInHere").innerHTML = "";
  document.getElementById("whereYouWantIt").style.display = "inline";
}
</script>

</body>

CSS

#whereYouWantIt {
    display:none;
    other styles ...
}
#contentIsInHere {
    display:none;
    no other styles needed
}