处理图片加载失败是Web前端开发中的一个常见需求，常用的图片处理库之一就是jQuery。下面我为大家介绍一下jQuery处理图片加载失败的常用方法。

1. JQuery的onerror事件处理方式

JQuery提供了onerror事件用来处理图片加载失败的情况，代码如下：

$('img').on('error',function(){
   //图片加载失败后的操作
});

下面是一个示例，当图片加载失败时，将图片的src属性设置为默认图片：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片加载失败的处理方法</title>
</head>
<body>
    <img src="error.jpg" alt="加载失败" onerror="this.src='default.jpg'">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $('img').on('error',function(){
            $(this).attr('src','default.jpg');
        });
    </script>
</body>
</html>

在该示例中，图片的src属性初始值为error.jpg，但因为该图片不存在，导致加载失败。当图片加载失败时，该图片的onerror事件会被触发，将图片的src属性修改为default.jpg，该图片即会显示为默认图片。

2. JQuery的ajax处理方式

当图片加载失败时，我们可以通过ajax对图片进行重新请求，代码如下：

$.ajax({
    url:imgurl,
    type:'GET',
    success:function(){
        //图片加载成功的操作
    },
    error:function(){
        //图片加载失败后的操作
    }
});

下面是一个示例，当图片加载失败时，进行ajax重新请求：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片加载失败的处理方法</title>
</head>
<body>
    <img src="error.jpg" alt="加载失败" id="img1">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $('#img1').on('error',function(){
            var imgurl='default.jpg';
            $.ajax({
                url:imgurl, 
                type:'GET',
                success:function(response){
                    $('#img1').attr('src',imgurl);
                },
                error:function(){
                    alert('图片加载失败');
                }
            });
        });
    </script>
</body>
</html>

在该示例中，图片的src属性初始值为error.jpg，但因为该图片不存在，导致加载失败。当图片加载失败时，JQuery的onerror事件会被触发，执行ajax重新请求。当重新请求成功时，将图片的src属性修改为default.jpg，该图片即会显示为默认图片。

以上就是JQuery处理图片加载失败的常用方法，希望能对大家的开发工作有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery处理图片加载失败的常用方法 - Python技术站

jQuery处理图片加载失败的常用方法

1. JQuery的onerror事件处理方式

2. JQuery的ajax处理方式

相关文章