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

来源：互联网发布：重装系统网络连不上编辑：程序博客网时间：2024/04/30 17:42

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

阅读全文

1 0