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