iPhone 图片加载失败

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';

问题在于，该onerror函数在 iPhone 上运行，而不是onload. 对于桌面来说，onload运行得很好，并且没有onerror.

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

使用小提琴时，img1 由于未知原因失败，而 img2 成功。

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

编辑：

很有意思。我将 img 重新保存为 jpg，现在它可以工作了http://jsfiddle.net/PvY5t/9/ 有人可以提供一些颜色来解释为什么会这样吗？

编辑2：

这里的这些链接似乎非常相关

（确实）长背景图像在 iPad Safari 上无法呈现

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

Answer 1

好吧，我想答案是这样的。

\n\n

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

\n\n

然而这个苹果链接

\n\n

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

\n\n

说对于 PNG 我的图像必须是

\n\n

width * height \xe2\x89\xa4 3 * 1024 * 1024

\n\n

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

\n\n

正方形的最大图像尺寸应该是sqrt(3 * 1024 * 1024)1773px。果然，当我将图像缩小到 1770px 时，它就可以工作了http://jsfiddle.net/PvY5t/10/

\n\n

JPEG 有不同的资源限制，所以我的 jpg 工作没有达到该限制。

\n