某些图像未在移动浏览器中显示（但在桌面浏览器中显示）

Question

我遇到了一个问题，我的 iPhone 上的移动浏览器中没有显示某些图像，但我在所有桌面浏览器中都可以看到它们。在我的手机上，我只看到一个带有灰色边框的空白框，图像应该在那里。

一些注意事项：

• 似乎是随机发生的，因为有些图像一天显示，然后第二天就停止显示
• 我注意到如果我在页面仍在加载时滚动页面，我经常可以看到图像，然后它就消失了。
• 所有图像都放置在IMG标签中，而不是背景图像。所有的链接和文件名都是正确的。
• 过去我已经能够通过重新保存图像然后重新上传来修复其中的一些问题，但它通常会恢复到相同的消失行为

Answer 1

你的图片有可能很大吗？

从这个关于iOS 最大图像大小的页面：

IOS 强制 Safari Mobile 中的最大图像大小。在大多数情况下，它比网页上使用的要大得多。在开发使用基于大帧的动画的 HTML5 游戏和交互式应用程序时，可能会遇到限制。如果包含的图像大于最大尺寸，则不会加载该图像。

图像类型有不同的限制：JPG 图像最多可解码 32 百万像素，而 PNG、GIF 和 TIFF 最多可解码 3 - 5 百万像素（取决于设备）。PNG、GIF 和 TIFF 的最大大小因设备上的 RAM 而异。RAM 小于 256 MB 的设备可以是 3 个解码 MP，而其他 iOS 设备限制为 5 个解码 MP。

请注意，限制不是通过图像的文件大小来衡量的，而是通过解码像素的数量来衡量的。一个解码的百万像素 (MP) 等于尺寸为 1024 x 1024 像素的图像，无论压缩如何。

这个页面有一些处理大量图像（以及大图像）的建议。链接页面上的内容只是建议使用 javascript 在需要时加载图像，并卸载那些在屏幕上不再可见的图像。作者发现可以通过src将img元素的属性修改为更小的图像来卸载图像。一段时间后，原始图像将被垃圾收集器拾取（约 6 秒，如果我正确阅读他的代码）

来自上面链接的示例：

var img = document.getElementById('idOfTheImageToUnload');
img.src = 'images/empty.gif';

从 DOM 中完全删除图像的替代方法（作​​者声明必须在超时时完成以确保删除的图像被 GC 接收。）

var img = document.getElementById('previous');
img.parentNode.removeChild(img);
img.src = 'data:image/gif;base64,' + 'R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
window.timeout(function() { img = null; }, 60000);