图片加载事件未在 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。在 Safari 或 IOS 上的 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';
}

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

Image load event not triggering on iPhone (IOS)

javascript

iphone

image

onload-event

ios