如何在图片加载时出现 ALL 404

Question

问题：我有一个网页，可以从外部源加载大量图像。其中一些图像链接可能会被破坏，我有一个脚本，onerror如果未加载，则通过删除图像的属性调用该脚本（以及一些相关内容，如标题、一些标签...）。在大多数情况下，这都可以正常工作，除非图像服务器向我发送默认图像来替换丢失的图像。在这种情况下，onerror事件不会触发，我的页面会得到一个丑陋的默认图像。我想做的事：我希望能够检测并消除这些图像。问题：1）有没有办法检测从img标签加载图像的状态代码（404）？（根据我所做的研究，这似乎不可能，但我仍在问......）。2）如果#1 不可能，一种解决方案似乎是调用类似的方法来加载图像XMLHttpRequest并查看响应代码。在这种情况下：有没有更合适的方法呢XMLHttpRequest？我应该预料到 CORS 会带来很多问题吗？作为参考，这里是基于以下的解决方案草案XMLHttpRequest：function imgLoad(url, onOk, onProblem) {    'use strict';    var request = new XMLHttpRequest();    request.open('GET', url);    request.responseType = 'blob';    request.onload = function () {        if (request.status === 200) {            onOk(request.response);        } else {            onProblem();        }    };    request.onerror = function () {        // if the request fails        onProblem();    };    request.send();};function onOk(response) {    var body = document.querySelector('body');    var myImage = new Image();    myImage.crossOrigin = ""; // or "anonymous"    var imageURL = window.URL.createObjectURL(response);    myImage.src = imageURL;    body.appendChild(myImage);};function onProblem(err) {    // remove the image and the other related elements};function loadImage(url) {    'use strict';    imgLoad(url, onOk, onProblem);};编辑：回答@Oo，实际代码如下：<img src="http://someimageurl.jpg" onerror="imgError(this);">只是一个简单的 img 标签。该imgError功能是在图像未加载时删除与图像相关的元素的功能。但如果返回默认图像，则仅当不返回图像时才起作用。

Answer 1

这是我实施的实际解决方案。同时我为图像添加了延迟加载。这是代码，以防它对任何人有帮助：

/**

* this function load the image using an XMLHttpRequest to be able to read the status code from javascript.

*/

function imgLoad(image, onOk, onError) {

    var url = image.dataset.src;

    var request = new XMLHttpRequest();

    request.open('GET', url);

    request.responseType = 'blob';

    request.onload = function () {

        if (request.status === 200) {

            onOk(request.response, image);

        } else {

            onError(image);

        }

    };

    request.onerror = function () {

        // if the request fails

        onError(image);

    };

    request.send();

};

/**

* This function is called if the image successfully loads. It just replace the "src" prop and the image is pulled from the cache from the browser.

*/

function onOk(response, image) {

    image.crossOrigin = ""; // or "anonymous"

    var imageURL = window.URL.createObjectURL(response);

    //image.src = imageURL;  // to use the blob response

    image.src = image.dataset.src;  // to use normal src and disk cache

    image.onerror = "";

    image.classList.remove("lazy");

};

/**

* small helper

*/

function loadImage(image) {

    imgLoad(image, onOk, imgError);

};

/**

* wrap up and lazy loading implementation

*/

document.addEventListener("DOMContentLoaded", function() {

    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {

      let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

        entries.forEach(function(entry) {

          if (entry.isIntersecting) {

            let lazyImage = entry.target;

            loadImage(lazyImage);

            lazyImageObserver.unobserve(lazyImage);

          }

        });

      });

      lazyImages.forEach(function(lazyImage) {

        lazyImageObserver.observe(lazyImage);

      });

    } else {

      // fall back

      lazyImages.forEach(function(lazyImage) {

        loadImage(lazyImage);

      });

    }

  });

我没有包含“onError”函数，因为它对于我的代码来说非常具体，并且在这里不是非常相关。