How to detect if the image path is valid?

Question

I have found a question regarding the images

How to detect if the image path is broken?

I have tried the following codes

var image = new Image;
    image.src = "http://project" + path + '.png';

    image.onload = function(){
        var imageWidth = this.width + this.height;
        if(imageWidth==0){
           image.src = "http://project2" + path + '.png';            

           //the project2 path could be broken too and 
           //I want to use project3 or project4 as the
           //path and keep testing it, but there is no way to do it from here.
       }
    }

Would it be possible to do a recursive test here? Thanks a lot!

Is it not enough to simply open developer tools and see if any of your linkages are broken? — klewis, May 02 '13 at 17:54
I need to do it on the flying. so codes can pick the image that has valid path. — FlyingCat, May 02 '13 at 17:54

score 3 · Accepted Answer · answered May 02 '13 at 18:05

You could try this setup:

var paths = ["/img1", "/img2", "/img3"];
var beginning = "http://project";
var ending = ".png";

function getImage(images, prefix, suffix, callback) {
    var iterator = function (i) {
        if (i < images.length) {
            var image = new Image();

            image.onload = function () {
                var imageWidth = this.width + this.height;
                if (imageWidth === 0) {
                    console.log("onload problem");
                    iterator(++i);
                } else {
                    console.log("onload good");
                    callback(i, image);
                }
            };

            image.onerror = function () {
                console.log("onerror");
                iterator(++i);
            };

            image.src = prefix + images[i] + suffix;
        }
    };
    iterator(0);
}

getImage(paths, beginning, ending, function (index, img) {
    console.log("Callback: ", index, ", ", img);
});

DEMO: http://jsfiddle.net/2mRMr/2/

epascarello · Answer 2 · 2013-05-02T18:06:20.117

Broken images would call onerror, not onload.

image.onerror = function () {
  console.log("broken");
  callToTryNewSrc();
}

Basic recursive check

function getImage(path, callback) {

    //if numeric
    var ind = 1;
    var maxServer = 5;

   //if named differently
   //var ind = 0;
   //var servers = ["//foo1","//foo2","//bar1"];
   //var maxServer = servers.length-1;


    function test() {

        var img = new Image();
        img.onload = function () {
            if (callback) {
                callback(img);
            }
        }
        img.onerror = function () {
            if (ind <= maxServer) {
                test();
            } else {
                if (callback) {
                    callback(img);
                }
            }
        }
        var currentPath = "http://project" + ind + path + '.png';
        //var currentPath = servers[ind] + path + '.png';

        img.src = currentPath;
        ind++;
    }

    test();

}

//calling it
getImage("/foo", function (img) {
    console.log(img);
});

How to detect if the image path is valid?

2 Answers2

Linked