如何在图片加载时出现 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) {&nbsp; &nbsp; var url = image.dataset.src;&nbsp; &nbsp; var request = new XMLHttpRequest();&nbsp; &nbsp; request.open('GET', url);&nbsp; &nbsp; request.responseType = 'blob';&nbsp; &nbsp; request.onload = function () {&nbsp; &nbsp; &nbsp; &nbsp; if (request.status === 200) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onOk(request.response, image);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onError(image);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; request.onerror = function () {&nbsp; &nbsp; &nbsp; &nbsp; // if the request fails&nbsp; &nbsp; &nbsp; &nbsp; onError(image);&nbsp; &nbsp; };&nbsp; &nbsp; 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) {&nbsp; &nbsp; image.crossOrigin = ""; // or "anonymous"&nbsp; &nbsp; var imageURL = window.URL.createObjectURL(response);&nbsp; &nbsp; //image.src = imageURL;&nbsp; // to use the blob response&nbsp; &nbsp; image.src = image.dataset.src;&nbsp; // to use normal src and disk cache&nbsp; &nbsp; image.onerror = "";&nbsp; &nbsp; image.classList.remove("lazy");};/*** small helper*/function loadImage(image) {&nbsp; &nbsp; imgLoad(image, onOk, imgError);};/*** wrap up and lazy loading implementation*/document.addEventListener("DOMContentLoaded", function() {&nbsp; &nbsp; var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));&nbsp; &nbsp; if ("IntersectionObserver" in window) {&nbsp; &nbsp; &nbsp; let lazyImageObserver = new IntersectionObserver(function(entries, observer) {&nbsp; &nbsp; &nbsp; &nbsp; entries.forEach(function(entry) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (entry.isIntersecting) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let lazyImage = entry.target;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loadImage(lazyImage);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lazyImageObserver.unobserve(lazyImage);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; lazyImages.forEach(function(lazyImage) {&nbsp; &nbsp; &nbsp; &nbsp; lazyImageObserver.observe(lazyImage);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; // fall back&nbsp; &nbsp; &nbsp; lazyImages.forEach(function(lazyImage) {&nbsp; &nbsp; &nbsp; &nbsp; loadImage(lazyImage);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; });我没有包含“onError”函数，因为它对于我的代码来说非常具体，并且在这里不是非常相关。