Lösen Sie das Problem von 404 beim Laden von js images_javascript-Fähigkeiten

Nachdem eine Website über einen längeren Zeitraum betrieben wurde, ist es unvermeidlich, dass das Bild 404 angezeigt wird. Der Grund kann sein, dass die Bilddatei nicht existiert oder derzeit nicht existiert. Eine gängige Lösung besteht darin, das 404-Bild auszublenden oder durch das Standardbild zu ersetzen.
img-Tag-Ereignisattribut
Die Zeitattribute, die in img-Tags verwendet werden können, sind:
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
Die häufig verwendeten Ereignisse des img-Tags sind wie folgt:
onerror: Wird ausgelöst, wenn beim Laden des Bildes ein Fehler auftritt.
onabort: Wenn das Bild geladen wird, wird es ausgelöst, wenn der Benutzer auf „Laden stoppen“ klickt. Normalerweise wird hier eine Eingabeaufforderung ausgelöst: „Bild wird geladen“.
onload: Wird ausgelöst, wenn das Bild geladen wird.
1. Überwachen Sie Fehlerereignisse für Bilder

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

Hinweis: Die Verarbeitungsfunktion muss im Kopf definiert werden, um zu verhindern, dass die Verarbeitungsfunktion nicht gelesen wird, wenn ein Bildladefehler auftritt
2. Verwenden Sie jQuery, um Fehler zu überwachen

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

Hinweis: Das Laden von jQuery muss vor img erfolgen und die Verarbeitungsfunktion muss nach img erfolgen
3. Funktionsverarbeitung verwenden

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

Die oben genannten Funktionen haben viele Verwendungsmöglichkeiten:
1. Bildinformationen abrufen: ob das Bild heruntergeladen werden kann, Bildbreite und -höhe

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. Bilder herunterladen und einfügen

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

Das Obige ist die js-Lösung für das 404-Problem beim Laden von Bildern. Ich hoffe, Sie können etwas gewinnen.