在 iOS 上使用 JavaScript 动态设置图像 src 失败

Posted 2023-03-15

【中文标题】在 iOS 上使用 JavaScript 动态设置图像 src 失败

【英文标题】：Setting image src dynamically using JavaScript failed on iOS

【发布时间】：2019-09-02 22:49:37

【问题描述】：

我有以下 javascript 代码

var aimg = new Image();
aimg.crossOrigin = 'Anonymous';
aimg.onload = function () 
    //execute some code when image loaded
;
aimg.onerror = function () 
    //execute some code when image failed to load
;
aimg.src = someExistedImageUrl;

在 Chrome、Linux 桌面和 android 设备上的 Firefox 上运行，onload 被正确触发。但是在 ios 中，onerror 总是被触发，即使图像存在并且来自同一个来源。

为什么上面的代码在 iOS 中加载图片失败？

更新

我按照建议添加了以下代码，但不起作用。图片比较小，不到 80 KB。

aimg.src = null;

【问题讨论】：

显示的错误是什么？

控制台没有错误，但总是触发onerror。在浏览器地址栏手动打开图片url，图片加载成功。

你能说明在 iOS 上onerror 的调用方式吗？

无法复制

在 onerror 函数中添加 console.log(arguments); 并向我们展示打印的内容。

【参考方案1】：

可能是缓存问题。试试这个，看看它是否有效；

var aimg = new Image();
aimg.crossOrigin = 'Anonymous';
aimg.onload = function () 
    //execute some code when image loaded
;
aimg.onerror = function () 
    //execute some code when image failed to load
;
aimg.src = null;
aimg.src = someExistedImageUrl;

此外，请检查您的图像大小。

JavaScript 分配也限制为 10 MB。 Safari 提出了一个 如果超过总内存分配的限制，则异常 JavaScript。

更多信息，您可以查看This question

【讨论】：

我会尽快尝试的