Javascript 不使用jQuery处理丢失的图像

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

使用

到目前为止，handleErrors如下所示：

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

但我觉得这是不够的可扩展性和无图像也无法访问的屏幕阅读器

---

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

尝试对图像使用alt text属性

屏幕阅读器更容易访问它们

此外，您还可以创建一个模块，该模块会在出错时隐藏图像和图像 将其替换为alt文本

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

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

HTML:

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

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

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

为图像提供一个ID，并使用此ID调用函数：

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

---

给出一个ID更合适。

img{width:100%；height:100%}没有帮助吗？或者将最小高度和宽度设置为%？