不使用jQuery处理丢失的图像
不使用jQuery处理丢失的图像
提问于 2015-01-30 11:14:29
我想为处理客户端丢失的图像创建一个干净的解决方案。
使用<img src="image.gif" onerror="handleErrors()">
到目前为止，handleErrors看起来是这样的：
function handleErrors() {
image.onerror = "";
image.src = "/images/noimage.gif";
return true;
}但我觉得这是不够可伸缩的，没有图像也是无法访问屏幕阅读器。
对于这个问题，什么样的解决方案才能更具有可伸缩性和可访问性？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-30 11:19:58
尝试对图像使用alt属性。
它们更便于屏幕阅读器访问。 此外，您还可以创建一个模块，该模块在错误时隐藏图像，并将其替换为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();Stack Overflow用户
发布于 2015-01-30 11:31:14
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();提供身份证是更合适的方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28234698
复制相关文章
相似问题
腾讯云开发者
