Is this a valid test to check if a URL refers to an Image in JS/jQuery

Question

$(function() {
    $("<img>", {
        src: "http://www.google.com.sg/intl/en_ALL/images/logos/images_logo_sm.gif",
        error: function() { alert("error!"); },
        load: function() { alert("ok"); }
    });
});

Got inspiration from How can I test if a URL is a valid image (in javascript)?

UPDATE

The next step will be: how can I encapsulate this logic into a function. I tried this -> http://jsfiddle.net/wp7Ed/2/

$(function() {
    function IsValidImageUrl(url) {
        $("<img>", {
            src: url,
            error: function() { return false; },
            load: function() { return true; }
        });
    }
    alert(IsValidImageUrl("http://www.google.com.sg/intl/en_ALL/images/logos/images_logo_sm.gif"));
    alert(IsValidImageUrl("http://error"));
});

but of course it fails... how can I return from an internl event handler? Or how can I implement this?

Related: maisonbisson.com/blog/post/12150/…

Pekka
– Pekka

2011-01-12 13:09:38 +00:00
Commented Jan 12, 2011 at 13:09 — Pekka
– Pekka, Commented Jan 12, 2011 at 13:09

Martin Jespersen · Accepted Answer · 2011-01-12 14:48:02Z

22

You cannot ever turn an asynchonous call into a synchronous one in javascript.

error and load are asynchronous events, so you have to do it like this:

function IsValidImageUrl(url) {
    $("<img>", {
        src: url,
        error: function() { alert(url + ': ' + false); },
        load: function() { alert(url + ': ' + true); }
    });
}

IsValidImageUrl("http://www.google.com.sg/intl/en_ALL/images/logos/images_logo_sm.gif");
IsValidImageUrl("http://error");

or you can parse in callback function you define elsewhere like this:

function myCallback(url, answer) {
    alert(url + ': ' + answer);
}

function IsValidImageUrl(url,callback) {
    $("<img>", {
        src: url,
        error: function() { callback(url, false); },
        load: function() { callback(url, true); }
    });
}

IsValidImageUrl("http://www.google.com.sg/intl/en_ALL/images/logos/images_logo_sm.gif", myCallback);
IsValidImageUrl("http://error", myCallback);

The clean and performant version skips the jQuery overhead like this

function myCallback(url, answer) {
    alert(url + ': ' + answer);
}

function IsValidImageUrl(url, callback) {
    var img = new Image();
    img.onerror = function() { callback(url, false); }
    img.onload =  function() { callback(url, true); }
    img.src = url
}

IsValidImageUrl("http://www.google.com.sg/intl/en_ALL/images/logos/images_logo_sm.gif", myCallback);
IsValidImageUrl("http://error", myCallback);

edited Jan 12, 2011 at 14:48

answered Jan 12, 2011 at 14:25

Martin Jespersen

26.3k8 gold badges60 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

lonesomeday Over a year ago

+1 for a great answer, but you need to add the callback argument to the IsValidImageUrl calls in the jQuery version.

Martin Jespersen Over a year ago

Thx for noticing,. callbacks have been added

Jiew Meng Over a year ago

Thx, but if I need to validate a user input? How can I do that? I need to know if the form is valid b4 I submit. How would you do it? I will be using jQuery Validate, but for now a simple example will do

Martin Jespersen Over a year ago

You could disable the submit button until the check is done. the check could then be done by hooking into the onchange event of the text field where the user types the image URL into (if thats the case) - it all depends on your solution, there are always many different ways to reach the same goal, usually the constraints are what code you already have and are unwilling to change.

levhita Over a year ago

I had found that it loads a large part of the file before checking if the url was indeed an image, for example a large mp4 would be almost completely downloaded before detecting it wasn't an image :/

|

Sarfraz · Accepted Answer · 2011-01-12 13:08:43Z

0

I think yes because an error event is fired when image is not found. As in your code, if image is not found (meaning not a valid path to an image), the alert will come up with message error!.

Here is another version of how it might look:

$('#imgID').error(function(){
  alert('image not found !');
});

You can also change the path of your image in case previously specified image was not found like this:

$('#imgID').error(function(){
   this.src = 'new path to some image';
});

answered Jan 12, 2011 at 13:08

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

1 Comment

Jiew Meng Over a year ago

Thanks, I want to do something more realistic and encapsulate the logic into a function, how can I return from the handlers? jsfiddle.net/wp7Ed/2

Collectives™ on Stack Overflow

Is this a valid test to check if a URL refers to an Image in JS/jQuery

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related