L'événement de chargement d'image ne se déclenche pas sur l'iPhone (IOS)

Question

J'ai un extrait de code très simple pour définir une image d'arrière-plan d'un élément une fois que l'image a été chargée sur un nouvel objet image.

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'; 

Cette question a déjà été posée plusieurs fois mais les réponses n'ont pas été satisfaisantes.

Ce n'est pas la taille de l'image. L'événement de chargement n'est pas déclenché, quelle que soit la taille ou le format de l'image.

L'événement d'erreur n'est pas déclenché non plus. Certaines personnes ont suggéré que l'événement d'erreur sera déclenché à la place de l'événement de chargement sur IOS.

Ce n'est pas un navigateur. C'est IOS. Le comportement est le même sur Safari ou Chrome sur IOS.

Il n'est pas observable avec BrowserStack. L'image se charge correctement sur BrowserStack mais un périphérique physique est incapable de déclencher l'événement de chargement.

J'attribue d'abord la fonction et ensuite src pour déclencher l'événement de chargement.

Answer 1

Cela semble fonctionner pour moi. Mais je ne suis pas sûr que la modification de l'écouteur d'événement add pour l'événement .load ait fait la différence.

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'; 
}