Example 1 : Checks all the image tag
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
</head>
<body>
<div>
<img id="candidate" src="test.jpg" onerror="this.src='images/default.jpg'"/>
<span id="result1"></span>
</div>
<script type="text/javascript">
// wait for page to load
$(document).ready(function() {
// add fixBroken code to all images on the document
$('img').fixBroken();
});
$.fn.fixBroken = function(){
return this.each(function(){
var tag = $(this);
var alt_img = 'images/default.jpg';
tag.error(function() { // this adds the onerror event to images
tag.attr("src",alt_img); // change the src attribute of the image
return true;
} );
});
};
</script>
<body>
<html>
Example 2 : suitable if only one tag is need to be checked
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
<style type="text/css">
span{
padding:8px;
border:1px solid red;
color:blue;
}
</style>
</head>
<body>
<div>
<img id="candidate" src="default.jpg"/>
<span id="result1"></span>
</div>
<script type="text/javascript">
$('#candidate')
.load(function(){
$('#result1').text('Image is loaded!');
})
.error(function(){
$('#result1').text('Image is not loaded!');
$('img#candidate_icon').attr('src','${baseUrl}uploads/default.jpg');
});
</script>
<body>
<html>
No comments:
Post a Comment