How to check whether the image from the specified URL loaded or not

Question

Through an ajax call, I am procuring URLs which I need to use to change the src of an img. However this is taking time. Meanwhile i need to show loading or something. How do i check whether $("#img#).attr("src","http:\\fsomething "); has loaded the image on the page or not?

Can you show your code for the AJAX call? My advice would be to add the loading image before the AJAX call, and then add an AJAX callback on Success to remove the loading image. — Mark, Jul 18 '14 at 12:33
@Spokey I might agree except that question and none of the answers are using jQuery, which has pretty good support for callbacks in general. — Mark, Jul 18 '14 at 13:03

score 0 · Answer 1 · answered Jul 18 '14 at 12:37

I would add the call to show the Loading image before the AJAX Call:

$('#ajaxLoadingContainer').html('<img src="secure_content/images/ajax-loader-small.gif">');

$.ajax({
    url: 'secure/ajax.php?action=checkSession',
    type: 'GET',
    dataType: 'HTML',
    async: true,
    success: removeAjaxLoader,
});

function removeAjaxLoader() {
    $('#ajaxLoadingContainer').html('');
}

score 0 · Answer 2 · answered Jul 18 '14 at 12:38

Use the below code to get a callback event, after the new image is loaded

var isrc = "http:\\fsomething ";
var image = new Image();
    image.onload=function(){
       //Image load callback
    }
image.src = isrc;
$('body').append(image);

Use this code in the ajax success function. Show a loading image before the ajax call and hide the loading image in the image load callback function.

score 0 · Answer 3 · answered Jul 18 '14 at 12:42

0

try this

$.ajax({
url:'http://stackoverflow.com/secure_content/images/ajax-loader-small.gif',
type:'HEAD',
error: function()
{
    //file not exists
},
success: function()
{
    //file exists
}
});

answered Jul 18 '14 at 12:42

Arun Kumar

1,607
1
18
33

score 0 · Answer 4 · answered Jul 18 '14 at 12:42

You can use javascript Image() for this.

var img = new Image(); // Show loading image here jQuery('#loadingImg').show(); img.onload = function(){ // image has been loaded // Hide the loading image jQuery('#loadingImg').hide(); }; img.src = 'image_url';

How to check whether the image from the specified URL loaded or not

4 Answers4