如果服务器无法访问，JS会更改图像/视频src

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). 问题：我对一个小的JavaScript代码感兴趣，该代码检查用户是否有权访问Smugmug.com，如果没有，则将图像源更改为其他服务器（计划使用视频实现此功能，但此示例仅使用图像）。 There will be one Smugmug check, multiple Source changes on the same html page. 将在同一html页面上进行一次Smugmug检查，对多个Source进行更改。 Here is a jsfiddle I have put together to test this out. 这是我整理来测试的jsfiddle 。 When I change smugmug.com/favicon.ico to smug1234mug.com/favicon.ico the code does not change the source image. 当我将smugmug.com/favicon.ico更改为smug1234mug.com/favicon.ico ，代码不会更改源图像。

HTML: 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: 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. 由于您在值声明，onload和onerror函数中使用字符串，并且在if语句中使用数字，因此条件永远不会为true，因为"1"===1为false。 You can either change your condition to a string or just use a normal double equals. 您可以将条件更改为字符串，也可以只使用普通的double等于。

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 您遇到的第二个问题更加复杂，这是由于触发了各种事件的时间所致，您编写的代码仅在事件以特定顺序触发时才起作用， changeImage函数依赖于isSmugMug适当设置，当它被调用时，如果changeImage是之前称为SMimage加载（或没有） isSmugMug仍将是默认值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. 在这里，我添加了一个变量来保存SMimage检查是否已完成的状态， changeImage使用500毫秒间隔的计时器等待SMimage检查完成，在检查完成后，将计时器删除，并且将图像已更改。 This isn't a perfect solution, especially if you've got a lot of these checks on one page. 这不是一个完美的解决方案，尤其是如果您在一页上有很多此类检查的情况下。

如果服务器无法访问，JS会更改图像/视频src

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-07-16 19:31:25

如果服务器无法访问，JS会更改图像/视频src

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-07-16 19:31:25

解决方案1
0 已采纳 2014-07-16 19:31:25