我似乎无法找到这个相当有趣的问题的答案。在谷歌浏览器中，具有设置宽度和/或高度的图像（使用属性，内联样式或CSS样式）拒绝在初始加载时显示在页面上。它们似乎只是在有一些页面活动后出现。然而，如果你让图像加载到它们的自然尺寸，它们在页面加载时显示完全正常。图像可以看作是在其他浏览器中工作，当检查chrome中的元素时，图像显示在弹出窗口中。
有谁知道如何解决这个问题？
答案 0 :(得分：2)
定义你的意思：'经过一些页面活动'。
您还提到当您设置宽度和/或高度时会发生这种情况，这会让我相信您的一些测试您的省略宽度或高度，因此可以由浏览器计算。如果是这种情况那么是的，图像永远看起来不合适，元素在初始页面加载时没有大小。在下载图像时，浏览器检查图像并确定缺少的尺寸以创建边界框。
编辑：
在查看您的在线网站后，我之前的评论解释了它的要点，但我可以看到您设置的宽度为“自动”，这要求浏览器首先加载图像并检测尺寸。这将导致浏览器渲染中延迟的“重排”。设置宽度和高度，否则需要由客户端浏览器计算。如果你没有那么好的电脑，它看起来很迟钝。在我的系统上，如果我在没有缓存的情况下进行硬刷新，有时我会得到所有的拇指，而其他时候我没有，并且延迟非常明显。
因此，简而言之，使您的图像始终具有宽度和高度。
编辑：
您还有一些可能导致延迟的404错误。 http://www.webpagetest.org/result/120725_0C_3N6/1/details/
编辑：
我认为您唯一的选择是首先加载bg图像，然后按照下载的资源顺序将其加载到更高的位置，以便尽可能快地加载bg图像进行渲染。 一个技巧可能是将bg图像加载到隐藏的div中以立即预加载它，以便浏览器首先下载它。即使你这样做，你也应该期待在等待高分辨率下载并加载时看到一些黑色背景。无论如何都无法在背景图像上设置宽度和高度。更进一步，您可以加快响应时间，可能是在页面加载后通过AJAX调用加载所有缩略图，这样他们甚至不会与大照片镜头竞争并开始下载直到dom完全加载。你甚至可以在那里放置一个很好的效果，可能会在缩略图加载时淡化或者出现这种效果。