css - 奇怪的谷歌浏览器图像错误

Question

我似乎无法找到这个相当有趣的问题的答案。在 google chrome 中，具有设置宽度和/或高度的图像(使用属性、内联样式或 css 样式)拒绝在初始加载时显示在页面上。它们似乎只在有一些页面事件之后才会出现。然而，如果你让图像加载到它们的自然大小，它们在页面加载时显示得非常好。图像可以在其他浏览器中看到，当检查 chrome 中的元素时，图像显示在弹出窗口中。

有人知道如何解决这个问题吗？

Answer 1

定义您的意思:“在一些页面事件之后”。

您还提到，当您设置宽度和/或高度时会发生这种情况，这让我相信您的一些测试会忽略宽度或高度，以便浏览器可以计算它。如果是这种情况，那么是的，图像永远不会看起来正确，并且元素在初始页面加载时没有大小，直到下载图像，浏览器检查图像并确定缺少的尺寸以创建边界框。

编辑:

查看您的在线网站后，我之前的评论解释了它的要点，但我可以看到您将宽度设置为“自动”，这需要浏览器首先加载图像并检测尺寸。这将导致浏览器渲染延迟“回流”。设置您的宽度和高度，否则它们将需要由客户端浏览器计算。如果你没有那么好的电脑，它看起来很慢。在我的系统上，如果我在没有缓存的情况下进行硬刷新，有时我会得到所有的赞许，而其他时候则不会，而且延迟非常明显。

简而言之，让您的图像始终具有宽度和高度。

编辑:

您还有一些 404 错误会导致一些延迟。 http://www.webpagetest.org/result/120725_0C_3N6/1/details/

编辑:

我认为您唯一的选择是首先加载 bg 图像，方法是按照下载资源的顺序将其调高，以便尽可能快地加载以进行渲染。一个技巧可能是将 bg 图像加载到隐藏的 div 中以立即预加载它，以便浏览器首先下载它。即使你这样做了，在等待高分辨率照片下载和加载时，你应该会看到一些黑色背景的闪光。无论如何都无法在背景图像上设置宽度和高度。更进一步，您可以通过在页面加载后使用 AJAX 调用加载所有缩略图来加快响应时间，这样它们甚至不会与大照片竞争并开始下载，直到 dom 完全加载。您甚至可以在其中添加一个不错的效果，可能会在缩略图加载时淡入淡出或达到那种效果。