Question

这本质上是此问题的后续问题：

Positioning a div relative to a fixed div with responsive content

所以我们在同一页上，如果您仔细阅读该文章，可能会对您有所帮助！：）

谢谢。

我将链接文章答案中的Javascript用于一个单独的项目，其中“颜色” div现在是“内容” div，而我的内容div内大约有30张图像。我现在没有问题可以将我的“内容” div正确地固定在固定div上，但是我遇到的问题是当我合并定位“内容” div的Javascript时，它正在计算和定位“内容” “ div之后，将加载该div中的所有内容。因此，基本上，第一张图像会隐藏在固定标题下，直到所有图像都加载完毕，然后再将其放置在需要的位置。我需要将“内容” div放置在“内容” div加载之前的任何图像之前。

我已经做过研究，试图弄清楚如何选择和选择首先要阅读的代码，但是我尝试过的所有事情都还没有奏效。我最近的尝试是将JS将“内容” div放置在“头部”下方，然后在“正文”之前，以便首先读取它，但直到将其中的所有内容都完全放置后，它仍然不会将“内容” div放置加载。

我要去哪里错了？

这是一个JSFiddle，代码为：https://jsfiddle.net/8wkotamf/

这是Javascript（也在JSFiddle中）：

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);

几乎不可能在JSFiddle上重新创建问题，因为由于图像实际上并未嵌入，因此图像会立即加载，并且您无法确定完全加载图像后便会发生定位。希望所有代码都能使其轻松解决！手指交叉了！

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

Answer 1

窗口中的所有内容（HTML文档和包括图像的所有内容）均已加载时，会触发

window.addEventListener('load' ...。您希望函数在文档加载时即DOM准备就绪时运行，但不必等到所有其他资源（例如图像）都完全加载后。

如果您不需要支持IE 8或更低版本，请尝试使用document.addEventListener("DOMContentLoaded", function() {...。在解析DOM并准备就绪时，它将等到触发后才会触发，而不是等到图像等加载完成后才会触发。如果确实需要支持旧版IE，请使用Jquery的$(document).ready()。

有关更多信息，请参见window.onload vs $(document).ready()。

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

1 个答案: