html - 元素定位不正确

Question

第一次去this page ，幻灯片的定位(使用JQuery循环插件开发的)全乱了，像这样:

如果我随后刷新页面，它会正确显示，如下所示:

如何确保此页面在第一次查看时正确显示？与其他浏览器相比，Chrome 似乎更常发生不正确的布局，但正如您从上面的屏幕截图中看到的那样，其他浏览器也会发生这种情况。

谢谢，唐

Answer 1

为图片添加width和height属性。

我猜测 JavaScript 在图像加载之前激活，然后它会进行一些快速计算以获得所需的尺寸，并将它们锁定到位；所有这些都发生在图像加载之前，并且由于没有 width 或 height 属性，因此尺寸会出现偏差。在重新加载时，图像从浏览器缓存中出来，因此当 JavaScript 运行时尺寸是已知的。

您的 JavaScript 在 DOM 准备就绪时运行，而不是在所有事物都已完全解析和加载时运行。您也可以尝试将幻灯片绑定(bind)到 load事件而不是 document.ready。

与其他浏览器相比，您在 Chrome 中更容易看到这种情况，因为 Chrome 速度非常快，这会放大计时问题。