html - CSS 定位 - 如何解决负载问题

Question

我的主页上有两个 css 按钮，它们相对于图像具有绝对位置。我遇到的问题是它们的加载速度比图像加载速度要快得多，因此在加载页面的瞬间，按钮会漂浮在 la la Land 中，直到图像加载并且它们对齐。

是否有一个简单的解决方法或者我必须完全重做定位？

Answer 1

最简单的方法是最初隐藏按钮（显示：无），并使用 javascript/jquery 显示 onload。

jQuery示例是这样做的：

$('#ImgReferenced').on('load',function(){
    $('input[button]').show();
});

但同样可以在带有 onload 事件处理程序的 javascript 中完成。

Answer 2

<img ... width="xxx" height="yyy">您是否在图像元素上使用宽度和高度属性？这就是浏览器如何为图像“保留空间”并在加载图像之前知道其尺寸的方式。它需要这个，所以它可以绘制与图像相关的东西。