Selesaikan masalah 404 apabila memuatkan kemahiran js images_javascript

Setelah lama mengendalikan laman web, tidak dapat dielakkan imej 404 akan muncul. Sebabnya mungkin fail imej itu tidak wujud atau tidak wujud pada masa ini. Penyelesaian biasa ialah menyembunyikan imej 404 atau menggantikannya dengan imej lalai .
atribut acara teg img
Atribut masa yang boleh digunakan dalam teg img ialah:
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragen, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousemessage, onmousemessage onmouseve, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
Acara yang biasa digunakan bagi teg img adalah seperti berikut:
ralat: Dicetuskan apabila ralat berlaku semasa memuatkan imej.
onabort: Apabila imej sedang dimuatkan, ia dicetuskan apabila pengguna mengklik untuk berhenti memuatkan Ia biasanya mencetuskan gesaan di sini: "Imej sedang dimuatkan".
onload: Dicetuskan apabila imej dimuatkan.
1. Pantau peristiwa kesalahan untuk imej

<img src="someimage.png" onerror="imgError(this);" /> 
 
// 原生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"); 
} 

Nota: Fungsi pemprosesan perlu ditakrifkan di kepala untuk mengelakkan fungsi pemprosesan tidak dibaca apabila ralat memuatkan imej berlaku
2. Gunakan jQuery untuk memantau ralat

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

Nota: Pemuatan jQuery perlu sebelum img, dan fungsi pemprosesan perlu selepas img
3. Gunakan pemprosesan fungsi

// 原生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; 
} 

Fungsi di atas mempunyai banyak kegunaan:
1 Dapatkan maklumat imej: sama ada imej boleh dimuat turun, lebar dan tinggi imej

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. Muat turun dan masukkan gambar

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

Di atas adalah penyelesaian js kepada masalah 404 semasa memuatkan imej saya harap anda boleh memperoleh sesuatu.