Check Image url is valid or broken

Question

How can i check given url is got valid image or 404 if not valid (404) then recheck after 20 seconds and try like this for 5 mins with Javasript

checkFileExists = function(){
    $.ajax({
        type: 'HEAD',
        url: fileUrl,
        crossDomain: true,
        success: function(response) {
          // Further processing if file exists
          fileExists = true;
          console.log(response);
        },
        error: function(error) {
            // File does not exists, run through function again-
          console.log(error);
          fileExists = false;
        }
    });
  }



if(!fileExists) {
   setTimeout(function(){
      checkFileExists();
   }, 20000);
}

But its not working it throws error 'XMLHttpRequest cannot load XXXX No 'Access-Control-Allow-Origin' header is present on the requested resource.'

** and my file url is 'https://drive.google.com/thumbnail?xxxx' im requesting from my localhost

Look at this [post](http://stackoverflow.com/questions/20442628/cors-jquery-ajax-request) — Arnau Lacambra, May 04 '16 at 08:09
no its impossible to set server header because im trying to check google drive thumbnail. — Wimal Weerawansa, May 04 '16 at 08:11
Simply the server is saying that the request is coming without the header. I don't think you can do it with ajax. — pinturic, May 04 '16 at 08:12
Then take a look at [this](https://developers.google.com/drive/v3/web/quickstart/js#step_2_set_up_the_sample). An API to connect to Google Drive through Javascript ;) — Arnau Lacambra, May 04 '16 at 08:18

Nightw0rk · Accepted Answer · 2016-05-04T08:21:03.167

2

try in function checkFileExists create new img element, set url image and set onError event func.

var checkImage = function(url){
    console.log("1");
    var s = document.createElement("IMG");
    s.src = url
    s.onerror = function(){
    console.log("file with "+url+" invalid");
        alert("file with "+url+" invalid")
    }
    s.onload = function(){
        console.log("file with "+url+" valid");
        alert("file with "+url+" valid")
    }
}

checkImage("http://ya.ru/favic2on.ico")

More info

edited May 04 '16 at 08:21

answered May 04 '16 at 08:08

Nightw0rk

411
3
9

Thanks it's working, but i can see error logs on console, is their a way to remove this error message 'GET https://drive.google.com/thumbnail?xxxx 404 ()' – Wimal Weerawansa May 04 '16 at 08:25
red message 'GET --- 404'. will be always. with onerror and with $.ajax. But i think is it not critical. you catch error and user not see broken image – Nightw0rk May 04 '16 at 08:29

score 0 · Answer 2 · edited May 23 '17 at 12:07

I found two interesting ways for checking if an image URL is broken or not on the web:

function isImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren't downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
        return false;
    }

    // No other way of checking: assume it's ok.
    return true;
}

When the page loads, we run over the images[] array to check them all.

addEvent(window, "load", function() {
    for (var i = 0; i < document.images.length; i++) {
        if (!isImageOk(document.images[i])) {
            document.images[i].style.visibility = "hidden";
        }
    }
});

For checking the URLs in 20 seconds intervals, you can use a setTimeout() function of javascript in a loop.

(function(){
    // do some stuff
    setTimeout(arguments.callee, 60000);
})();

you can take a look at this link: Calling a function every 60 seconds for more details about calling a function every X seconds.

Check Image url is valid or broken

2 Answers2