Question

如果你想要背景，这是How can I stop an IFrame reloading when I change it's position in the DOM?的后续问题。

我在页面下方有一个内联div <div id="leaderboard-slot"></div>（具有固定的宽度和高度）和另一个div（“leaderboard-loader”），其中包含该div的实际内容。

由于各种原因（参见上一个主题），我无法简单地执行appendChild或类似操作。

相反，我希望将排行榜加载器定位为占用排行榜位置“保留”的空间。我使用了一些jQuery方法来做到这一点：

var loader = $('leaderboard-loader');
var dest = $('leaderboard-slot');
var pos = dest.getPosition();
loader.setStyle('top', pos.y + 'px');
loader.setStyle('left', pos.x + 'px');

我在文档加载时调用并调整大小。但是，如果页面中的其他元素导致重排，则目标div移动，但加载器不移动。

有没有一种安全的方法可以做到这一点 - 当我对页面一无所知时它需要工作（即我不能只是对可能导致重排的任何其他方法进行调用，因为我不知道那些是什么。）

非常感谢任何帮助 - 谢谢：）

Answer 1

如果我正确理解您的问题，则无需使用Javascript。只需将leaderboard-loader放在leaderboard-slot标记的前面，然后将其position: absolute和相同的宽度和高度放在一起。如果slot是普通元素，则loader将浮动在它上面并完美地覆盖它。

<div id="leaderboard-loader"></div><div id="leaderboard-slot"></div>

Answer 2

我现在开始后悔my answer。希望你能找到比绝对定位解决方案更好的东西。但是，根据kludgey解决方案的精神，您可以在计时器上调用重新定位脚本。叹息

Answer 3

你可以将它们两者放在相同的相对位置，0边距div中，临时div z-indexed在慢速加载器的顶部。

让它们绝对定位在父级而不是窗口中，位于0：0且大小相同。

你可以使用不透明度并在淡出另一个时使用淡入淡出，或者只是交换可见性：当你准备好时，两个元素的隐藏和可见...

如何将绝对定位的元素直接保持在内联元素的位置上？

3 个答案: