1

我有一些非常简单的代码可以在桌面上使用 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 是成功的。

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

编辑：

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

编辑2：

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

（真的）长背景图像不会在 iPad Safari 上呈现

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

4

3 回答 3

4

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

我正在尝试使用 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 没有达到这个限制。

于 2013-09-12T21:10:22.917 回答
3

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

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

于 2016-01-14T11:19:52.593 回答
2

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

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

于 2013-09-12T21:02:03.037 回答