图片加载失败裂开jquery和js的前端处理方法

最新推荐文章于 2024-08-01 14:29:41 发布

jyj1014461394

最新推荐文章于 2024-08-01 14:29:41 发布

阅读量8.1k

点赞数 2

本文链接：https://blog.csdn.net/jyj1014461394/article/details/75315078

版权

图片加载失败裂开jquery和js的前端处理方法

1.jquery方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    </head>
<body>
<img src="imges/img.png"/>//图片此时图片是一个裂了坏掉的图
<script>
$(function(){ 
//error在jquery1.8以前是提倡使用的
$('img').error(function(){ 
$(this).attr('src','链接图片');    
});
}); 
</script>
</body>
</html>

2.jquery方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>
<body>
<img src="imges/img.png"/>//图片此时图片是一个裂了坏掉的图
<script>
$(function(){ 
//1.9之后不太提倡了，但是仍然可以使用，用下面这种方法
$('img').on('error',function(){ 
$(this).attr('src','链接图片'); 
}); 
}); 
</script>
</body>
</html>

3.js方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
<body>
<img src="imges/img.png" onerror="this.src='链接图片'">
</body>
</html>

3.js方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
<body>
<!--图片较少的时候比较合适-->
<img src="imges/img.png" onerror="this.src='链接图片'">
</body>
</html>

4.js方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
<body>
<!--图片较少的时候比较合适-->
<img id="myImg" src="imges/img.png" />
<script>
document.getElementById("myImg").addEventListener("error", myFunction);
function myFunction() {
    document.getElementById("myImg").src = "链接图片";
}
</script>
</body>
</html>