怎么用jquery检查图片是否已经加载即加载是否成功

怎么检查图片已经加载成功或失败,你能够联合使用jquery的load 和error 事件来检查。

$('#image1')
        .load(function(){
               $('#result1').text('Image is loaded!');       
        })
        .error(function(){
               $('#result1').text('Image is not loaded!');
        });

如果图片已经加载成功,load函数就会被调用,否则的话error 函数或被调用。


代码:

<html>
<head>
<title>load or error</title>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<style type="text/css">
span{
 padding:8px;
 border:1px solid red;
 color:blue;
}
</style>
</head>
<body>
<h1> check if image is loaded jquery<h1>
<p>
<img id="image1" data-*="text" src="http://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png"/>
<p>load image from jquery<p>
<span id="result1"></span>
</p>
<p>
<img id="image2" src="xxx.jpg"/>
<p>load image from "xxx.jpg"</p>
<span id="result2"></span>
</p>
<script type="text/javascript">
$('#image1').load(function(){
   $('#result1').text("iamge is loaded");
})
.error(function(){
 $('#result1').text("iamge is not loaded");
});
$('#image2').load(function(){
   $('#result2').text("iamge is loaded");
})
.error(function(){
 $('#result2').text("iamge is not loaded");
});
</script>
</body>
</html>


效果:



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值