img的onerror事件

使用场景

其实on error使用上是比较简单的。
当我们网站上出现了无效图片，而我们希望用友好的方式告诉用户，而不是显示红叉叉。
w3c上解释的 定义和用法：
onerror 事件会在文档或图像加载过程中发生错误时被触发。
在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。
W3C上关于onerror的用法

<div>
    demo1 : src 为正确地址 （结果是：src为正确时，显示正确图片，不会显示onerror中的默认图片）
    <img src="../cat.jpg" onerror="javascript:this.src='../video占位图.jpg';" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>

<div>
    demo2 : src 为错误地址（结果是：src为错误时，不会显示alt的错误信息，显示了onerror中的默认图片）
    <img src="http://baidu.com" onerror="javascript:this.src='../video占位图.jpg';" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>

<div>
    demo3 : src 为空 （结果是：src为空时，不会显示alt的错误信息，显示了onerror中的默认图片。因此，src为空也是判断了src加载地址的错误）
    <img src="" onerror="javascript:this.src='../video占位图.jpg';" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>
    
<script>
    function errorImg(img){
        //alert("OK");
        img.src = "../video占位图.jpg";
        img.onerror = null;
    }
</script>
<div>
    demo4 : src 为错误地址or为空    (用函数的方式实现默认图片替换src加载失败的无效图片）
    <img src="" onerror="errorImg(this)" alt="图片显示失败" style="width: 80px;height: 80px;">
</div>  
<div>
    demo5 : 动态创建的img中的onerror   (知识点：转义符)
</div>
<script>
    function moveErrorImg(img){
        console.log("OK");
        img.src = "../video占位图.jpg";
        img.onerror = null;
    }
    var htm = '<img src="" onerror='+moveErrorImg(this)+' alt="图片显示失败" style="width: 80px;height: 80px;">'
    document.write(htm);

    var htm1 = '<img src="" onerror=\'moveErrorImg(this)\' alt="图片显示失败" style="width: 80px;height: 80px;">'
    document.write(htm1 +" ");

    var htm2 = '<img src="" onerror=\"moveErrorImg(this)\" alt="图片显示失败" style="width: 80px;height: 80px;">'
    document.write(htm2 +"<br/>");

    var htm3 = '<img src="" onerror="javascript:this.src=\'../video占位图.jpg\';" alt="图片显示失败" style="width: 80px;height: 80px;">'
    document.write(htm3);

    var htm4 = '<img src="" onerror="javascript:this.src=\"../video占位图.jpg\";" alt="图片显示失败" style="width: 80px;height: 80px;">'
    document.write(htm4 +" ");

    var htm5 = "<img src='' onerror='javascript:this.src=\"../video占位图.jpg\";' alt='图片显示失败' style='width: 80px;height: 80px;'>"
    document.write(htm5 +"<br/>");

</script>

效果如下：

转载于:https://www.cnblogs.com/ixiaohao/p/5524770.html