怎么检查图片已经加载成功或失败,你能够联合使用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>
效果: