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以触发load事件。

Answer 1

这似乎对我有用。但我不确定是否更改.load事件的add事件监听器是否有所不同。

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）上没有触发图像加载事件

1 个答案: