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

Question

我有一个非常简单的代码片段，用于在图像加载到新图像对象上后设置元素的背景图像。

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 上触发错误事件而不是加载事件。

这不是浏览器。这是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';
}