Question

我有一些非常简单的代码可以在台式机上使用桌面上的Chrome，Firefox，IE和Safari，但是当我在Iphone上试用它时，它会失败。

基本上是

var img1 = document.createElement('img');

img1.onerror = function() {
    console.log('img1 fail');
};

img1.onload = function() {
    console.log('img1 success');
};

img1.src = 'http://gvgmaps.com/linktothepast/maps/LegendOfZelda-ALinkToThePast-LightWorld.png';

问题是在iPhone上运行onerror函数而不是onload。对于桌面，onload运行正常，没有onerror。

http://jsfiddle.net/PvY5t/4/

随着小提琴img1因未知原因失败而且img2成功。

有人可以告诉我如何在iPhone上为img1和img2成功运行onload吗？

编辑：

非常有趣。我将img重新保存为jpg，现在它可以正常运行http://jsfiddle.net/PvY5t/9/有人可以提供一些颜色说明原因。

EDIT2：

这里的链接似乎非常相关

(Really) Long Background Image Does Not Render on iPad Safari

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

Answer 1

好的我认为答案是这样的。

我正在尝试使用4096 x 4096的PNG文件

然而这个苹果链接

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

对于PNG说我的形象必须是

width * height ≤ 3 * 1024 * 1024

显然我已经超过了已知的iOS资源限制。

正方形的最大图像尺寸应为sqrt(3 * 1024 * 1024)，如1773px。当我将图像缩小到1770像素时，它确实有效http://jsfiddle.net/PvY5t/10/

JPEG具有不同的资源限制，因此我工作的jpg没有达到这个限制。

Answer 2

我在iOS 9上遇到过这个问题，因为我设置了img.crossOrigin = "anonymous"。

从相机中删除允许大照片直接在iPad上加载。

Answer 3

所以我在我的iOS模拟器上在Safari中进行了一些网络分析，看起来第一张图像被正常请求（响应状态200，确定，图像似乎已加载）。仍然不确定为什么它会触发onerror事件而不是onload事件。我猜测它与Javascript预期在加载图片时会回来的标题有关，但我似乎无法追踪它。请继续关注编辑。

编辑：你拥有/管理托管图像的服务器吗？如果是这样，当服务器提供.png图像时，您的服务器可能会做一些时髦的事情。

IPhone img onload失败

3 个答案: