文档中的最后一个图像无法加载 - “无法加载资源”

Question

我在刷新后遇到网站初始页面加载问题。我使用Chrome进行开发，但问题在所有浏览器中都很明显。

我收到消息“等待mysite.com ......”，加载指示灯一直在旋转。这样保持这样大约10秒钟然后Chrome放弃并告诉我“无法从开发者控制台加载资源'foobah.png'”。图像肯定在所述的路径上。有时它加载有时不加载。如果我完全删除对此图像的引用，则错误将落在页面内的不同图像上。这是一个常规但间歇性的故障。

我的网站是javascript（2500多行）我怀疑它可能与之相关：

1. Javascript加载干扰 图片加载。
2. 有趣的事情正在发生 缓存图像。

有没有人有这种类型的页面加载问题的经验？

感谢您提供的任何帮助！

示例网址： http://dev.thebeer.co/imgs/UI/inboxIcon.png

Chrome开发者工具屏幕：

更新

这是来自firebug的示例屏幕截图。您可以看到对资源的​​请求没有超时但需要很长时间才能检索。 失败的文件可以从CSS背景图像到普通图像到甚至是字体文件。我认为这个问题比客户端更深。我们也一直在体验Chrome“以下网页已经变得无法响应。您可以等待他们响应或杀死他们”偶尔出错。我们已经剥离了所有javascript的页面，它几乎是一个裸壳！图像加载问题继续通过浏览器发生。

更新

我发现http错误日志中的以下错误似乎与问题有关。任何人都知道他们的意思以及如何解决这些问题？

[ Wed Feb 23 06:54:17 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5871 for worker proxy:reverse
[Wed Feb 23 06:54:17 2011] [debug] proxy_util.c(1967): proxy: initialized single connection worker 0 in child 5871 for (*)
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5872 for worker proxy:reverse
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1873): proxy: worker proxy:reverse already initialized
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1967): proxy: initialized single connection worker 0 in child 5872 for (*)
[Wed Feb 23 06:59:15 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5954 for worker proxy:reverse
[Wed Feb 23 06:59:15 2011] [debug] proxy_util.c(1873): proxy: worker proxy:reverse already initialized

Answer 1

听起来它是一个非常重的网站（2500多行js！）。奇怪的是，您只能在Chrome上体验它，但这可能只是处理请求的方式。

由于您的静态内容太重，我建议您使用内容分发网络（CDN）。通过CDN（和地理位置）传播您的内容允许用户由最近的，因此最快的服务器提供服务。

有许多CDN提供商负责托管您的内容。我使用Amazon S3存储工具，而不是真正的CDN，帮助我传播我的静态内容，这确实加快了我的网站。

使用Amazon S3，您可以指定存储区域的地理位置，无论是美国还是欧洲等。此地理位置可能比现有的Web服务器更接近，这是一个奖励。 S3为您提供免费会员资格以进行测试。

希望这有帮助。

克里斯。

Answer 2

如果它是特定于Chrome的，我会说它可能与this known bug有关，但是既然你提到它正在其他浏览器中发生，你是否从Firebug获得相同的错误，Safari的网络开发者工具，和/或IE的开发人员工具？

此外，您的网页总下载时间和金额是多少？我在你的图像中看到似乎有大量文件，有些图像需要几秒钟才能加载。可以对这些中的任何一个进行优化吗？

帮助解决整个问题的一种方法是创建精灵，或尽可能使用非图像替代品（您可以使用一些CSS3技术来替换渐变等等），以及使用像SmushIt用于图像，JS minifier和combiner用于减少文件大小和服务器请求。

Answer 3

最后我找到了一个有这个问题的人：

chrome classic - “无法加载资源”

这个问题会让开发人员感到疯狂，因为它可能会发生本地，只有少量请求和一个小的 PNG - 但是，如果您在新标签中打开图片，你的形象将......精装！

重要提示：Chrome缓存是我遇到的最棘手的问题 - 尝试使用隐私模式禁用/绕过chrome的缓存，或在资源后面附加一个随机字符串

重要提示2：有时Web检查程序的网络选项卡会使连接超时 - 这就是您看到“待处理”状态的原因

我尝试过的解决方案/解决方法：

1. 将您的Chrome升级到最新版本（通常是运气不好）
2. 使用图像预加载（有时可行）
3. 使用data-uri并将其放在另一个.css文件中：http://css-tricks.com/data-uris/

通过一些格式化（css选择器，css规则顺序和换行符），通过一些试验和错误，再次加载图像。 （这个神奇地工作）

我想知道原始图像的特定位是否卡住图像渲染器（因为数据uri在开始时不起作用）...但是当某些CSS样式应用于PNG背景块时会出现此问题 - 尤其是何时涉及“不透明” （或PNG是一个隐藏的背景）

要点：

1. 以任何方式压缩图像
2. 更改CSS选择器（例如，在其他元素中应用背景），如果仍然无法加载，那么就是图像问题 - 尝试更改原始图像的某些位*或使用data-uri（解决方案3）
3. 更改图像加载顺序如果（2）加载了您的图像 - 那么它将是css选择器/排序问题

*我编辑图像后可能不相信，问题出现/消失。

（如果您遇到跨浏览器的其他图片的漫长等待时间，则很可能是性能问题但可能不是错误 - 某些阻止发生了）

Answer 4

所以随机听起来......在加载时向src附加一个随机数查询字符串。当我为一个老雇主工作一个自定义的popover库时，我遇到了这个问题，它加载的网站是......非常耗费资源，让我们说。由于某种原因，这对我来说是固定的。 YMMV？

img.src = 'x.gif?r=3192319231938123912';

Answer 5

你应该考虑压缩你的脚本文件（minify，gzip等）。如果图像的主机不同（images.yoursite.com），您将拥有更多的并行连接。

您可以使用异步javascript加载 - 就像Google在Google Analytics文档上建议的那样：     $（document）.ready（function（）{

 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

 ga.src = "xpto.js"

 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);

});

Answer 6

要尝试的几件事。要更正.woff问题，请在服务器设置中添加正确的mimetype：

AddType application/vnd.ms-fontobject .eot AddType application/octet-stream .otf .ttf

接下来，重新创建未加载的.png图像。可能是有人将图像保存为.jpg或gif，但后来用.png扩展名重命名了文件 - 从而混淆了浏览器。尝试再次创建该图像并确保将其保存为正确的格式。