Question

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

有几个笔记：

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

Answer 1

您的图片可能非常大吗？

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

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

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

This page有一些处理大量图片的建议（以及扩展的大图片）。链接页面上的内容只是建议使用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);

Answer 2

发生在我身上的事情是我正在使用背景图片而我错过了结束＆＃34;）;＆＃34;在网址上。因此，图像仍将显示在我的计算机中，但它们不会在任何移动浏览器上显示。所以，对于像我这样的疯子来说，可能太累了，无法弄清楚这一点。不要忘记确保网址是正确的：

我的错误

url(resoures-services-dedicated-support.jpg

正确的方法

url(resoures-services-dedicated-support.jpg);

免责声明，即使这可能不是正确答案，相信我们，看到这样可以为我节省几个神经元。

Answer 3

我了解这篇文章是5年前的，但是最近我遇到了这个问题，它就像在移动浏览器中使用受支持的图片格式一样简单。

示例：与其使用（.webp）中不太常见的文件类型，不如尝试使用.jpeg或.png中更常见的文件类型。

Answer 4

您可以根据显示尺寸调整图像尺寸。这是我的项目徽标的示例代码，并且有效。

<div class="image"><a href=/displayimage.php"><img src=/dir1/dir2/image.png" srcset="/assets/image.png **0.8**x" alt="image"/></a></div>

选择4x，3x，0.5x的可靠尺寸，或包含多个尺寸以进行动态显示。

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

4 个答案: