In this article, I will show how to check a particular image
is loaded to web page or not with JQuery load event.
If you are complete new to JQuery, Then refer the JQuery Quick Start
This gives you basic understanding of JQuery.
By using JQuery load and error events, we can check image is
loaded successfully or not.
If image is not loaded, then we can give some error
message to user with error event.
Some real-time use cases,
1) In some form can not be submitted with out digital signature.
2) For SimpleCaptcha for login page
Syntax is,
$('<<image_id>>').load(function(){
$('<<id_where the text to be displayed in case of successfully loadded>>')
.text('Image is loaded successfully!');
})
.error(function(){
$('<<id_where the text to be displayed in case of error>>')
.text('Image is not loaded!');
});
Complete source code is Here,
jquery_load_event.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
span{
padding:10px;
border:2px solid green;
color:red;
}
</style>
</head>
<body>
<h1> JQuery load event to check image is loaded or not </h1>
<p>
<img id="img1"
src="http://www.devjavasource.com/wp-content/uploads/2015/05/title_img-e1431517628525.png"/>
<p>Image is Loaded from "http://www.devjavasource.com/wp-content/uploads/2015/05/title_img-e1431517628525.png"</p>
<span id="imageIsLoaded"></span>
</p>
<p>
<img id="img2" src="aaaaa.png"/>
<p>Load image from "aaaaa.png"</p>
<span id="imageIsNotLoaded"></span>
</p>
<script type="text/javascript">
$('#img2')
.load(function(){
$('#imageIsNotLoaded').text('Image is loaded successfully!');
})
.error(function(){
$('#imageIsNotLoaded').text('Image is not loaded!');
});
$('#img1')
.load(function(){
$('#imageIsLoaded').text('Image is loaded successfully!');
})
.error(function(){
$('#imageIsLoaded').text('Image is not loaded!');
});
</script>
</body>
</html>
Out Put :
You can Try it your self by clicking the given link,
*** Venkat – Happy leaning ****