JS to change image/video src if server unreachable

Question

Question: I am interested in a small javascript code that checks if the user has access to Smugmug.com, and if not changes the image source to a different server (plan to implement this with video, but this example is with images only). There will be one Smugmug check, multiple Source changes on the same html page. Here is a jsfiddle I have put together to test this out. When I change smugmug.com/favicon.ico to smug1234mug.com/favicon.ico the code does not change the source image.

HTML:

<body>

<img id="myImage1" onload="changeImage('myImage1','http://www.prometeogallery.com/wp-content/uploads/2011/01/Invitation_NO_GLOBALTOUR-800x575.jpg')" src="http://www.americanrestomods.com/wp-content/uploads/2011/09/logo-portfolio-smugmug.png" width="100" height="100">
</body>

JS:

// check if SmugMug is reachable (run once only)
var isSmugMug = "1";

var SMimage = new Image();
SMimage.onload = function(){
    window.isSmugMug = "1";
// The user can access SmugMug
};
SMimage.onerror = function(){
// The user can't access SmugMug
    window.isSmugMug = "0";
};
SMimage.src = "http://smugmug.com/favicon.ico";


function changeImage(p1,p2) {

    if (window.isSmugMug===0) {
        document.getElementById(p1).src=p2;
    }

}

Answer 1

From what I can see, you've 2 problems. The first is a minor issue regarding the use of the triple equals ( === ), the triple equals operator checks not only the values equality but the type equality.

Since you use strings in the value declaration, onload and onerror functions, and a number in the if statement, the condition will never be true, because "1"===1 is false. You can either change your condition to a string or just use a normal double equals.

The second problem you have is a bit more complicated, and it's due to the timing of the various events being triggered, the code you've written will only work if the events are fired in a particular order, the changeImage function relies on isSmugMug being set appropriately when it is called, if changeImage is called before the SMimage loads (or doesn't) isSmugMug will still be your default value of 1

Here's an example of a solution to your second problem:

// check if SmugMug is reachable (run once only)
var isSmugMug = "1";
var smugMugChecked = false;

var SMimage = new Image();
SMimage.onload = function(){
    window.isSmugMug = "1";
    smugMugChecked = true;
// The user can access SmugMug
};
SMimage.onerror = function(){
// The user can't access SmugMug
    window.isSmugMug = "0";
    smugMugChecked = true;
};
SMimage.src = "http://smugmug.com/favicon.ico";


function changeImage(p1,p2) {
    var checkInterval = setInterval(function(){
        if (smugMugChecked == true) {
            clearInterval(checkInterval);
            if (window.isSmugMug==0) {
                document.getElementById(p1).src=p2;
            }
        }
    }, 500);
}

Here, I've added a variable to hold the state of whether the SMimage check has completed or not, the changeImage uses a 500 millisecond interval timer to wait for the SMimage check to complete, after the check is complete the timer is removed and the image is changed. This isn't a perfect solution, especially if you've got a lot of these checks on one page.

JS to change image/video src if server unreachable

Question

1 answers

solution1
0 ACCPTED 2014-07-16 19:31:25

JS to change image/video src if server unreachable

Question

1 answers

solution1 0 ACCPTED 2014-07-16 19:31:25

solution1
0 ACCPTED 2014-07-16 19:31:25