if image is exists by the link return true else false

Question

I have a code. It is verifying existing of the image. It works perfectly if instead of "return true;" I set "alert("exists");".

With "return true;" it return "undefined"; Why code do not work with "return true;"?

I exetute code like this gallery.VerifyImg("https://jonarhipov.neocities.org/2.png");

var gallery = {
    items: [],
    ItemsConstructor: function ItemsConstructor(img_url) {
        this.img_url = img_url;
    },
    CreateItem: function LoadImage(i) {
        /*
        gallery.items[i] = new ItemsConstructor("https://jonarhipov.neocities.org/" + i + ".jpg");
        $(".gallery").append("<div class='item' style='background-image: url(" + gallery.items[i].img_url + ")'></div>");*/
    },
    VerifyImg: function VerifyImg(url) {
        var success;
        var img = new Image();
        img.src = url;
        img.onload = function(){return true;};
        img.onerror = function(){return false;};

    }
}

Thanks!

You can not return from an asynchronous method. – epascarello Oct 11 '18 at 19:38 — epascarello, Oct 11 '18 at 19:38

score 1 · Accepted Answer · answered Oct 11 '18 at 19:52

Or use a callback function instead of promises

    var gallery = {
    items: [],
    ItemsConstructor: function ItemsConstructor(img_url) {
        this.img_url = img_url;
    },
    CreateItem: function LoadImage(i) {
        /*
        gallery.items[i] = new ItemsConstructor("https://jonarhipov.neocities.org/" + i + ".jpg");
        $(".gallery").append("<div class='item' style='background-image: url(" + gallery.items[i].img_url + ")'></div>");*/
    },
    VerifyImg: function VerifyImg(url,cb) {
        var success;
        var img = new Image();
        img.src = url;
        img.onload = cb;
        img.onerror = cb;

    }
}

Invoke it like so

gallery.VerifyImg(url,function(response) {
  console.log(response.type) //returns load or error
})

ingvar · Answer 2 · 2018-10-11T19:57:28.027

VerifyImg: function VerifyImg(url) {
        var success;
        var img = new Image();
        img.src = url;
        img.onload = function(){return true;};
        img.onerror = function(){return false;};

    }

return true; in this case returns from inner function, img.onload handler, that's why VerifyImg returns undefined. You should do something like this (sync solution):

var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();

return http.status >= 200 && http.status < 400;

If you want modern async solution, you can use fetch function:

return fetch(url, {method: "HEAD"}).then(data => data.status >= 200 && data.status < 400);

Both this versions of code won't download whole image from server, they will check if it's exists using HEAD request, that's faster and saves traffic.

thanks! It is long to learning it for me – Morbius Oct 11 '18 at 20:06 — Morbius, Oct 11 '18 at 20:06

score 0 · Answer 3 · answered Oct 11 '18 at 19:40

0

Your method is almost correct, you just need to return the Promise as image loading is async:

VerifyImg: function VerifyImg(url) {
    var promise = new Promise();
    var img = new Image();
    img.src = url;
    img.onload = promise.resolve;
    img.onerror = promise.reject;
    return promise;

}

answered Oct 11 '18 at 19:40

Eugene Tsakh

2,777
2
14
27

thanks, but it is not working – Morbius Oct 11 '18 at 20:06
Probably you are using it in a wrong way. `VerifyImage(url).then(() => console.log('exists')).catch(() => console.log('not exists'))` – Eugene Tsakh Oct 11 '18 at 20:16

if image is exists by the link return true else false

3 Answers3