花哨的盒子和网格显示问题。图片重叠

Posted 2023-05-09

【中文标题】花哨的盒子和网格显示问题。图片重叠

【英文标题】：fancy box and grid display issues. Pictures overlapping

【发布时间】：2020-03-22 11:29:34

【问题描述】：

有人可以看看下面的图片，让我知道我似乎做错了什么吗？在第一次加载时，图片会像这样显示，但是如果我刷新，它就会自行解决。

如果我注释掉脚本，那么一切正常。如果我重新添加脚本，那么它会在每次第一次加载时在图片中产生结果

【问题讨论】：

这是直播吗？你能分享一个链接吗？通过检查代码更容易看到发生了什么。我的预感要么是 CSS 问题，要么是脚本在 DOM 之前执行，如果完全加载会导致这些框在垂直方向上出现一些测量问题，从而导致它们重叠布局。

确实如此。这是实时链接poppinsscenic.com/costume-pictures.html。尝试将脚本移动到页面顶部而不是底部以测试页面是否在脚本之前加载，但似乎没有任何区别。感谢观看

我相信这是因为您缺少完整尺寸的图像。我在控制台中没有看到任何与此相关的问题。当我单击该链接，然后单击图像以加载幻灯片时，您会看到其中实际上缺少图像。这些丢失的图像对应于重叠发生的位置。大拇指都在那里，但有些全尺寸没有。

嗯，我没看到。我有全尺寸和相同的拇指吗？控制台证实了这一点。所有 9000 像素及以上

snipboard.io/I3Zwaq.jpg 而且，当您单击此图像时会发生什么？ poppinsscenic.com/img/gallery/costumes/11.jpg

【参考方案1】：

答案是大约有 3 张图片（全尺寸）未加载。原因是大写的.JPG和Chrome。将文件扩展名修复为 .jpg 将更正该问题，因为图像将加载，fancybox 可以进行计算以获得正确的高度。