在没有 jQuery 的情况下处理丢失的图像

Question

我想创建一个干净的解决方案来处理客户端丢失的图像

使用 <img src="image.gif" onerror="handleErrors()">

到目前为止 handleErrors 看起来像这样：

function handleErrors() {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

但我觉得这不够可扩展，屏幕阅读器也无法访问无图像。

对于这个问题，什么是更具可扩展性和可访问性的解决方案？

Answer 1

尝试为您的图片使用替代文本属性。

They are more accessible for screen readers.

Also you can create a module which on error hides the images and replaces them with their alt text

这是我为处理此类问题而编写的模块：

function missingImagesHandler() {
    var self = this;
    // get all images on the page
    self.pageImages = document.querySelectorAll("img");
    self.ImageErrorHandler = function (event) {
        // hide them
        event.target.style.display = 'none';
        // replace them with alt text
        self.replaceAltTextWithImage(event.target);
    }
    self.replaceAltTextWithImage = function (imageElement) {
        var altText = imageElement.getAttribute("alt");
        if (altText) {
            var missingLabel = document.createElement("P");
            var textnode = document.createTextNode(altText);
            missingLabel.appendChild(textnode)
            imageElement.parentNode.insertBefore(missingLabel, imageElement);
        } else {
            console.error(imageElement, "is missing alt text");
        }                    
    }
    self.attachErrorHandler = function () {
        self.pageImages.forEach(function (img) {
            img.addEventListener("error", self.ImageErrorHandler);
        });
    }
    self.init = function () {
        // NodeList doesn't have forEach by default
        NodeList.prototype.forEach = Array.prototype.forEach;
        self.attachErrorHandler();
    }
    return {
        init: self.init
    }
}
var ImgHandler = new missingImagesHandler();
ImgHandler.init();

Answer 2

HTML:

<img id="myImg" src="image.gif">

JavaScript:

document.getElementById("myImg").onerror = handleErrors();

function handleErrors() {
    document.getElementById("myImg").src = "http://blog.whosebug.com/wp-content/uploads/Whosebug-logo-300.png";
    return true;
}

为图像提供 ID 并使用它来调用您的函数：

document.getElementById("myImg").onerror = handleErrors();

提供ID更合适

在没有 jQuery 的情况下处理丢失的图像

Handling missing images without jQuery

html

javascript

http-status-code-404