某些图片未在移动浏览器中显示(但在桌面浏览器中显示) [英] Some images not showing in mobile browser (but showing in desktop browser)

问题描述

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

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.

一些注意事项:

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

• 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 IMG tags 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

推荐答案

您的图片是否可能很大?

Is it possible that your images are very large?

此页面上有关 iOS最大图像大小:

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

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.

图像类型有不同的限制:JPG图像最多可以解码32百万像素，而PNG，GIF和TIFF可以最多3-5解码百万像素(取决于设备). PNG，GIF和TIFF的最大大小因设备上的RAM而异. RAM少于256 MB的设备可以使用3个解码的MP，而其他iOS设备则只能使用5个解码的MP.

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.

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

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.

此页面提供了一些处理建议大量图像(并且扩展为大图像).链接页面上的内容仅建议使用javascript根据需要加载图像，并卸载屏幕上不再可见的图像.作者发现可以通过将img元素的src属性修改为一个 个较小的图像来卸载图像.一段时间后，原始图像将被垃圾收集器拾取(大约6秒钟，如果我正确阅读了他的代码)

This page has 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 src attribute of the img element to a much smaller 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)

上面链接中的示例:

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

从DOM完全删除图像的替代方法(作​​者声明必须在超时时完成，以确保删除的图像被GC拾取.)

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.)

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

这篇关于某些图片未在移动浏览器中显示(但在桌面浏览器中显示)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！