2017-01-30 1 views
0

이미지가 새 이미지 객체에로드되면 요소의 배경 이미지를 설정하는 매우 간단한 코드 스 니펫이 있습니다.iPhone (IOS)에서 이미지로드 이벤트가 발생하지 않습니다.

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를 설정하여로드 이벤트를 트리거합니다.

+0

혹시 해결책을 찾았습니까? 현재 귀하의 동일한 문제에 직면하고 있습니다. –

+1

예, 그 일을했습니다. 대답을 게시하겠습니다. –

답변

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

차가움. 내가 그것을 조사하자. :) 다시 와서 그것을 게시 주셔서 감사합니다! –

관련 문제