if image is exists by the link return true else false

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!

3 answers

  • answered 2018-10-11 19:39 ingvar

    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.

  • answered 2018-10-11 19:40 Eugene Tsakh

    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 2018-10-11 19:52 Toxnyc

    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
    })