js Images_javascript 스킬 로딩 시 404 문제 해결

오랜 기간 웹사이트를 운영하다 보면 필연적으로 이미지 404가 나타나는 경우가 있는데, 그 이유는 해당 이미지 파일이 존재하지 않거나 현재 존재하지 않기 때문일 수 있습니다. 일반적인 해결 방법은 404 이미지를 숨기거나 기본 이미지로 바꾸는 것입니다.
img 태그 이벤트 속성
img 태그에 사용할 수 있는 시간 속성은 다음과 같습니다.
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
img 태그에서 흔히 사용되는 이벤트는 다음과 같습니다.
onerror: 이미지 로딩 중 오류가 발생할 때 트리거됩니다.
onabort: 이미지가 로드될 때 사용자가 로드를 중지하기 위해 클릭하면 일반적으로 "이미지 로드 중"이라는 메시지가 표시됩니다.
onload: 이미지가 로드될 때 트리거됩니다.
1. 이미지 오류 이벤트 모니터링

<img  src="/static/imghwm/default1.png"  data-src="someimage.png"  class="lazy" onerror="imgError(this);" / alt="js Images_javascript 스킬 로딩 시 404 문제 해결" > 
 
// 原生JS: 
function imgError(image){ 
 // 隐藏图片 
 image.style.display = 'none'; 
 // 替换为默认图片 
 // document.getElementById("img").setAttribute("src", "images/demo.png"); 
} 
 
// 使用jQuery处理: 
function imgError(image){ 
 $(image).hide(); 
 // $(this).attr("src", "images/demo.png"); 
} 

참고: 이미지 로딩 오류가 발생할 때 처리 기능을 읽지 못하는 것을 방지하려면 헤드에 처리 기능을 정의해야 합니다
2. jQuery를 사용하여 오류 모니터링

// 通常不会再HTML里面内联js，可以使用.error对图片进行监听处理 
$('#test img').error(function() { 
 $(this).hide(); 
 // $(this).attr("src", "images/demo.png"); 
}); 

참고: jQuery 로딩은 img 이전에 이루어져야 하며 처리 기능은 img 이후에 이루어져야 합니다
3. 함수 처리를 이용하세요

// 原生JS解决方案 
function $id(id) { 
 return !id || id.nodeType === 1 ? id : document.getElementById(id); 
} 
function isType(o, t) { 
 return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0; 
} 
 
// 主要逻辑 
function image(src, cfg) { 
 var img, prop, target; 
 cfg = cfg || (isType(src, 'o') ? src : {}); 
 
 img = $id(src); 
 if (img) { 
  src = cfg.src || img.src; 
 } else { 
  img = document.createElement('img'); 
  src = src || cfg.src; 
 } 
 
 if (!src) { 
  return null; 
 } 
 
 prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth'; 
 img.alt = cfg.alt || img.alt; 
 
 // Add the image and insert if requested (must be on DOM to load or 
 // pull from cache) 
 img.src = src; 
 
 target = $id(cfg.target); 
 if (target) { 
  target.insertBefore(img, $id(cfg.insertBefore) || null); 
 } 
 
 // Loaded? 
 if (img.complete) { 
  if (img[prop]) { 
   if (isType(cfg.success,'f')) { 
    cfg.success.call(img); 
   } 
  } else { 
   if (isType(cfg.failure,'f')) { 
    cfg.failure.call(img); 
   } 
  } 
 } else { 
  if (isType(cfg.success,'f')) { 
   img.onload = cfg.success; 
  } 
  if (isType(cfg.failure,'f')) { 
   img.onerror = cfg.failure; 
  } 
 } 
 
 return img; 
} 

위의 기능은 다양한 용도로 사용됩니다.
1. 이미지 정보 가져오기: 이미지 다운로드 가능 여부, 이미지 너비 및 높이

image('img',{ 
 success : function () { alert(this.width + "-" + this.height); }, 
 failure : function () { alert('image 404!'); }, 
}); 
 
// 验证资源是否下载 
image('images/banner/banner_2.jpg', { 
 success : function () {console.log('sucess')}, 
 failure : function () {console.log('failure')}, 
 target : 'myContainerId', 
 insertBefore : 'someChildOfmyContainerId' 
}); 

2. 사진 다운로드 및 삽입

var report = $id('report'), 
 callback = { 
  success : function () { 
   report.innerHTML += '<p>Success - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>'; 
  }, 
  failure : function () { 
   report.innerHTML += '<p>Failure - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>'; 
  }, 
  target : 'target' 
 }; 
 
image('img', callback); 
image('images/banner/banner_2.jpg', callback); 

위 내용은 이미지를 로드할 때 발생하는 404 문제에 대한 js 솔루션입니다.