图像加载事件未在 iPhone (IOS) 上触发

Question

我有一个非常简单的代码 sn-p 来设置一个元素的背景图像，一旦图像加载到一个新的图像对象上。

var img = new Image();
var myelement = document.getElementById('myelement_id');
img.addEventListener('load', function(){
  myelement.setAttribute('style', 'background-image: url(/public/images/myimage.jpg)');
});
img.src = '/public/images/myelement.jpg';

这个问题已经被问过好几次了，但答案并不令人满意。

这不是图像的大小。无论图像的大小或格式如何，都不会触发加载事件。

错误事件也不会被触发。有人建议在 IOS 上触发 error 事件而不是 load 事件。

不是浏览器。是IOS。在 IOS 上的 Safari 或 Chrome 上的行为是相同的。

BrowserStack 无法观察到它。图像在 BrowserStack 上加载良好，但物理设备无法触发加载事件。

我确实先分配函数，然后设置 src 以触发加载事件。

Answer 1

这似乎对我有用。但我不确定将添加事件侦听器更改为 .load 事件是否有所不同。

function imgLoad(_imgDOM, _imgID){
  _imgDOM.setAttribute('style', 'background-image: url(/public/images/load/' + _imgID + '.jpg)');
}

var imgLoadArray = document.querySelectorAll('.img__load');

for (var i = 0; i < imgLoadArray.length; i++) {
  var imgDOM = imgLoadArray[i];
  var imgID = imgDOM.getAttribute('id');
  var img = new Image();
  img.onload = imgLoad(imgDOM, imgID);
  img.src = '/public/images/load/' + imgID + '.jpg';
}