Chrome 不加载我网站的图片，在处理请求时卡住了答案

【问题标题】：Chrome doesn't load my site's images, gets stuck at processing requestChrome 不加载我网站的图片，在处理请求时卡住了
【发布时间】：2015-01-17 20:35:14
【问题描述】：

我正在构建一个基于滑块显示图像和声音的小型网站。它将图像加载到轮播中（我使用的是 Slick）。但我遇到了 Chrome 的问题，而且只有 Chrome。移动滑块后，除非我使用滑块滚动几次，否则新图像不会加载到轮播中。我已经在本地进行了测试，并将所有内容上传到我的服务器进行尝试。我找了一个朋友试了一下，他也没有用。

这里是网站。警告这是一个非常重的负载，所以我不会在手机上打开它：http://kschenk.com/whyte-night。

控制台中什么也没有出现，我也没有安装任何插件。我得到的唯一提示是 Chrome 一直在旋转并“处理请求”。它适用于 Safari、Firefox 甚至 Internet Explorer。

我愿意接受任何帮助，并且可以提供任何必要的信息。

一些可能有用的东西：

滑块中的每个增量都会加载一个 ~5Mb 的音频文件，使用 html5 音频标签进行流式传输
滑块中的每个增量都会从轮播中删除图像，并添加 10 个新的图像，每个大约 1-2Mb，它们是延迟加载的
我现在尝试了两种不同的滑块，这个 (Slick) 和 Owl Carousel。两者都有问题。

谢谢！

【问题讨论】：

你的这个文件好像是空的？？？ http://kschenk.com/whyte-night/slick/slick.css.map 所以替换这张地图，可能有用
地图对我来说打开得很好。它是 slick carousel 包的一部分，所以应该不会影响这个问题，因为我在实现 slick 之前就有了它。
最初对该文件的请求以 0KB 待处理。一段时间后，它也被加载和图像。所以我觉得这个文件只会造成问题。
How to solve Chrome's 6 connection limit when using xhr polling的可能重复

标签： html google-chrome web

【解决方案1】：

如果您的 chrome 没有响应，您的图像显示正确，那么请重置您的 chrome 浏览器并检查一下...

【讨论】：

【解决方案2】：

您还可以考虑将图像缩小一点：如果您在 photoshop 中选择保存为网络，您会从 1.2MB 减少到 360KB...图像真的需要为 1800x1195 像素吗？您可以根据浏览器窗口大小选择较小的图像版本：对用户有利，对您的服务器有利:-)

【讨论】：

【解决方案3】：

好吧，我想通了！我想我会发布答案，以防其他人将来发现这个话题（我和你一样讨厌未回答的问题，未来的解决方案寻求者）。

所以谷歌浏览器允许每台服务器最多 6 个连接。显然大多数其他浏览器也这样做，但其中一些不尊重它。这就是它在 Safari 和 Firefox 中工作的原因。我正在加载许多图像和音频文件，因此当我尝试流式传输所有音频时它会挂起。会搞砸的。

我通过将图像放在子域中部分解决了这个问题。但是我的 8 个音频文件中只有 6 个被加载。我从谷歌搜索中发现，每台服务器的 6 个连接也将子域计为单独的服务器。这就是为什么将我的图像放在一张照片上会有所帮助的原因。但我仍然需要获取我的音频文件！

所以我创建了两个新的子域，“audio”和“audio2”。我在每个文件上放了 4 个音频文件并像以前一样加载它们，只是根据我要查找的文件更改子域。它可以工作，因为现在我每台服务器只打开了 4 个连接。

我猜它与通过 HTML5 音频标签的音频流的工作方式略有不同。由于在他们的网站上使用音频的人并不多，因此在线上的主题并不多。

【讨论】：

请注意，我现在认为这是一个令人难以置信的 hacky 解决方案。我还没有花时间解决这个问题，因为它不是那么重要，但我确实计划在未来这样做。