Main Tutorials

How to check if an image is loaded with jQuery

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>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
2 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Salman Razak
1 year ago

$(window).on(‘load’,function(){
            console.log(‘doc loaded’);
            $(‘img’).each(function(){
                $(‘.item’).css(‘background’,‘#000’);
                $(this).animate({‘opacity’:‘1’}, 4000);
                imageLoaded($(this), 0);
            });    
        });
        function imageLoaded(element, size) {
            var filterVal = ‘blur(‘ + size + ‘px)’;
            $(element).css({
                ‘filter’:filterVal,
                ‘webkitFilter’:filterVal,
                ‘mozFilter’:filterVal,
                ‘oFilter’:filterVal,
                ‘msFilter’:filterVal,
                ‘transition’:‘all 0.3s’,
                ‘-webkit-transition’:‘all 0.3s’,
                ‘-moz-transition’:‘all 0.3s’,
                ‘-o-transition’:‘all 0.3s’,
                ‘opacity’:1
            });
        }

not working with each to blur to 0… all run at same time… i want each to appear one by one and blur to 0.. initially image are blur and opacity 0

Pete Manousos
11 years ago

Hi – thanks for the code example on https://mkyong.com/jquery/how-to-check-if-an-image-is-loaded-with-jquery/ and we have two questions.

1. Although the “Try Demo” link works as stated (new window opens with URL https://mkyong.com/wp-content/uploads/jQuery/jQuery-check-if-image-loaded.html and displays correct results), we noted the span area outlined in red is shrunken and does not appear to contain the load status messages when under the following two circumstances: Save the code locally as test.html via “view source” from the new window that displays after clicking “Try Demo”. Cut/paste code listed under “Try it yourself” into a local file test.html. We note this happens in firefox 10.0.6 and IE 7.0.6022.18005 (these are installed by our IT dept on our pc’s and workstations).

2. Why won’t alert statements added in the code (example below) fire despite the image being loaded?? We believe your answer will help us better understand how this method is being executed.

$(‘#image1’)
.load(function(){
alert(“here”);
$(‘#result1’).text(‘Image is loaded!’);
alert(“here2”);
});