JavaScriptで画像のエラーを検出する方法


  1. onerrorイベントを使用する方法: JavaScriptのImageオブジェクトには、画像の読み込みエラーが発生したときに実行されるonerrorイベントがあります。以下は、この方法のコード例です。
let images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
  images[i].onerror = function() {
    console.log('エラー: ' + this.src);
  };
}
  1. Intersection Observerを使用する方法: Intersection Observerは、要素がビューポートに表示されるかどうかを監視するためのAPIです。画像の読み込みエラーを検出するために、Intersection Observerを使用することもできます。以下は、この方法のコード例です。
let images = document.querySelectorAll('img');
let observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (!entry.isIntersecting) {
      console.log('エラー: ' + entry.target.src);
    }
  });
});
images.forEach(function(image) {
  observer.observe(image);
});

これらは、JavaScriptを使用して画像のエラーを検出するためのいくつかの方法の例です。ご参考までにお使いください。