[javascript] jQuery로 이미지가로드되었는지 (오류 없음) 확인

element 의 W3C HTML Specification에 대한img 나의 이해를 바탕으로 다음 complete과 naturalHeight같이 및 속성 의 조합을 사용하여이를 수행 할 수 있어야합니다 .

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

complete속성 스펙에서 :

다음 조건 중 하나라도 해당되면 IDL 속성 완료가 true를 리턴해야합니다.

• src 속성이 생략되었습니다.
• 리소스를 가져 오면 네트워킹 작업 소스에서 대기중인 마지막 작업이 대기되었습니다.
• img 요소는 완전히 사용할 수 있습니다.
• img 요소가 손상되었습니다.

그렇지 않으면 속성이 false를 반환해야합니다.

따라서 complete이미지로드가 완료되었거나로드하지 못한 경우 true를 반환합니다. 이미지가 성공적으로로드 된 경우 만 원하므로 nauturalHeight속성도 확인해야합니다 .

IDL의 속성 naturalWidth과 naturalHeight이미지가 가능, 0 다른 경우, CSS의 픽셀 이미지의 고유 폭과 높이를 반환해야합니다.

그리고 available다음과 같이 정의됩니다.

img는 항상 다음 상태 중 하나입니다.

• 사용할 수 없음 -사용자 에이전트가 이미지 데이터를 얻지 못했습니다.
• 부분적으로 사용 가능 -사용자 에이전트가 일부 이미지 데이터를 얻었습니다.
• 완전 사용 가능 -사용자 에이전트가 모든 이미지 데이터를 확보했으며 최소한 이미지 크기를 사용할 수 있습니다.
• 손상됨 -사용자 에이전트가 가능한 모든 이미지 데이터를 얻었지만 이미지 크기를 가져 오기에 충분한 이미지를 디코딩 할 수도 없습니다 (예 : 이미지가 손상되었거나 형식이 지원되지 않거나 데이터를 얻을 수 없음) .

img 요소가 부분적으로 사용 가능한 상태이거나 완전히 사용 가능한 상태 인 경우 사용 가능하다고합니다.

따라서 이미지가 “깨진”경우 (로드에 실패한 경우) 사용 가능한 상태가 아닌 깨진 상태 naturalHeight가되므로 0이됩니다.

따라서 imgElement.complete && imgElement.naturalHeight !== 0이미지가 성공적으로로드되었는지 확인 해야합니다.

이에 대한 자세한 내용 은 img요소 의 W3C HTML 사양 또는 MDN을 참조하십시오 .

답변

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>