To check if an image is loaded successful or not, you can combine the use of jQuery ‘load()‘ and ‘error()‘ event :

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

If the image is loaded successful, the load() function is called, otherwise the error() function is called.

Try it yourself

<html>
<head>
 
<script type="text/javascript" src="jquery-1.4.2.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" 
src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>
<p>Load image from 
"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"</p>
 
<span id="result1"></span>
</p>
 
<p>
<img id="image2" src="xxxx.jpg"/>
<p>Load image from "xxxx.jpg"</p>
 
<span id="result2"></span>
</p>
 
<script type="text/javascript">
 
$('#image1')
	.load(function(){
		$('#result1').text('Image is loaded!');	
	})
	.error(function(){
		$('#result1').text('Image is not loaded!');
	});
 
$('#image2')
	.load(function(){
		$('#result2').text('Image is loaded!');	
	})
	.error(function(){
		$('#result2').text('Image is not loaded!');
	});
</script>
 
</body>
</html>
Try Demo
Any Java questions or problems? please post at this JavaNullPointer.com forum, see you there ~
[ Read More ] You can find more similar articles at jQuery Tutorials