我想创建一个干净的解决方案来处理客户端上缺少的图像
使用<img src="image.gif" onerror="handleErrors()">
到目前为止,handleErrors看起来像这样:
function handleErrors() {
image.onerror = "";
image.src = "/images/noimage.gif";
return true;
}
但我觉得这不够灵活,屏幕阅读器也无法访问图像。
对于这个问题,什么是更具可扩展性和可访问性的解决方案?
答案 0 :(得分:0)
尝试为图片使用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();
答案 1 :(得分:0)
<强> HTML:强>
<img id="myImg" src="image.gif">
<强> JavaScript的:强>
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并使用它来调用您的函数:
document.getElementById("myImg").onerror = handleErrors();
提供身份证是更合适的方式。