Javascript 在加载图像之前预加载JS计算

这基本上是这个问题的后续问题：

所以我们在同一页上，如果你通读那篇文章可能会有所帮助！：）

先谢谢你

我在一个单独的项目中使用链接文章答案中的Javascript，其中“color”div现在是“content”div，我的content div中大约有30个图像。现在让我的“content”div与固定div正确定位没有问题，但问题是当我合并定位“content”div的Javascript时，它会在加载该div中的所有内容后计算并定位“content”div。因此，基本上，第一个图像被隐藏在固定的标题下，直到所有图像都被加载，然后它将定位到需要的位置。我需要它将“content”div定位在“content”div加载中的任何图像之前

我已经做过研究，试图找出如何选择哪些代码首先被读取，但我尝试过的所有方法都还没有奏效。我最近的一次尝试是把JS放在“头”的正下方和“体”的正前方，这样就可以先读取它，但它仍然不会定位“内容”div，直到其中的所有内容都完全加载

我哪里做错了

下面是一个包含代码的JSFIDLE：

下面是Javascript（也在JSFIDLE中）：

在JSFIDLE上重新创建这个问题几乎是不可能的，因为图像实际上没有嵌入，它会立即加载，并且您无法判断定位是在它们全部加载完毕之后发生的。希望所有的代码将使它成为一个简单的修复虽然！祝你好运

---

非常感谢你们。非常感谢。

window.addEventListener（'load'…

在加载窗口中的所有内容（HTML文档和包括图像在内的所有内容）时激发。您希望在加载文档（即DOM就绪）时运行函数，但不一定要等到所有其他资源（如图像）完全加载

如果您不需要支持IE 8或更低版本，请尝试使用Jquery的

document.addEventListener（“DOMContentLoaded”，function（）{…

。这将在解析DOM并准备就绪时触发，而不是等到加载图像等。如果您确实需要支持旧的IE版本，请使用Jquery的

$（document）.ready（）

---

有关更多信息，请参阅。

非常感谢您提供的信息和查找更多信息的链接！我非常感谢，如果我的问题措辞不当，我深表歉意。祝您晚上休息愉快，先生！

window.addEventListener('load', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);

window.addEventListener('resize', function() {
var headerHeight = document.getElementById('header').clientHeight;
document.getElementById("content").style.paddingTop = headerHeight + "px";
var footerHeight = document.getElementById('footer').clientHeight;
document.getElementById("content").style.paddingBottom = footerHeight + "px";
}, true);