Html 某些图像未在移动浏览器中显示（但在桌面浏览器中显示）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25290813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Some images not showing in mobile browser (but showing in desktop browser)
提问by buuuue
I am having an issue where some images are not displayed in the mobile browsers on my iPhone, but I see them in all my desktop browsers. On my phone, I just see a blank box with a grey border where the image should be.
我遇到了一个问题，我的 iPhone 上的移动浏览器中没有显示某些图像，但我可以在我的所有桌面浏览器中看到它们。在我的手机上，我只看到一个带有灰色边框的空白框，图像应该在那里。
A couple notes:
一些注意事项：
- It seems to happen randomly because some images are displayed one day, and then will stop displaying the next day
- I noticed if I scroll through the page while it is still loading, I can often see the image, and then it disappears.
- All the images are placed in
IMGtags and are not background-images. All the links and file names are correct. - I have been able to fix some of these in the past by re-saving the image and then re-uploading, but it will then often revert to the same disappearing behavior
- 似乎是随机发生的，因为有些图像一天显示，然后第二天就停止显示
- 我注意到如果我在页面仍在加载时滚动页面，我经常可以看到图像，然后它就消失了。
- 所有图像都放置在
IMG标签中，而不是背景图像。所有的链接和文件名都是正确的。 - 过去我已经能够通过重新保存图像然后重新上传来修复其中的一些问题，但它通常会恢复到相同的消失行为
采纳答案by Joshua Shearer
Is it possible that your images are very large?
你的图片有可能很大吗？
From this page regarding iOS Maximum Image Size:
从这个关于iOS 最大图像大小的页面：
IOS enforces a maximum image size in Safari Mobile. In most cases it's much larger than what would be used on a webpage. The limit can be encountered when developing HTML5 games and interactive applications that use large frame based animations. If an image is included that is larger than the maximum size, the image will not load.
Image types have different limitations: JPG images can be up to 32 decoded megapixels, while PNG, GIF and TIFF can be up to 3 - 5 decoded megapixels (depending on device). The maximum size for PNG, GIF and TIFF varies due to the RAM on the device. Devices with less than 256 MB of RAM can be 3 decoded MP, while other iOS devices are limited to 5 decoded MP.
Note the limitation is not measured by the file size of the image but the number of decoded pixels. One decoded megapixel (MP) is equal to an image with dimensions: 1024 by 1024 pixels regardless of the compression.
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 像素的图像，无论压缩如何。
This pagehas some suggestions for handling large amounts of images (and by extension, large images). The content on the linked page simply suggests using javascript to load images as they are needed, and unload those images that are no longer visible on screen. The author found that images could be unloaded by modifying the srcattribute of the imgelement to a muchsmaller image. After some period of time, the original image would get picked up by the garbage collector (~6 seconds, if I'm reading his code correctly)
这个页面有一些处理大量图像（以及大图像）的建议。链接页面上的内容只是建议使用 javascript 在需要时加载图像，并卸载那些在屏幕上不再可见的图像。作者发现可以通过src将img元素的属性修改为更小的图像来卸载图像。一段时间后，原始图像将被垃圾收集器拾取（约 6 秒，如果我正确阅读他的代码）
Example from the link above:
来自上面链接的示例：
var img = document.getElementById('idOfTheImageToUnload');
img.src = 'images/empty.gif';
Alternate approach which removes the image from the DOM entirely (which the author stated must be done on a timeout to ensure the removed image gets picked up by the GC.)
从 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);
回答by drjorgepolanco
Something that happened to me was that I was using background images and I was missing the closing ");" on the url. So images would still show in my computer but they would not show on any mobile browser. So, just for those crazies like me that might be too tired to figure this out. Don't forget to make sure the url is correct:
发生在我身上的事情是我使用了背景图片而我错过了结尾的“);” 在网址上。因此图像仍会显示在我的计算机中，但不会显示在任何移动浏览器上。所以，对于像我这样可能太累而无法弄清楚这一点的疯子来说。不要忘记确保 url 是正确的：
My mistake
我的错
url(resoures-services-dedicated-support.jpg
The correct way
正确的方法
url(resoures-services-dedicated-support.jpg);
Disclaimer, even though this might not be the right answer, believe me guys, seeing this would have saved me a couple of neurons.
免责声明，即使这可能不是正确的答案，相信我，伙计们，看到这会为我节省几个神经元。
