您的位置：首页 > Web前端 > JQuery

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

2017-07-18 18:00 447 查看

图片加载失败裂开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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航