Question

问题：我对一个小的javascript代码感兴趣，该代码检查用户是否可以访问Smugmug.com，以及不是否将图像源更改为其他服务器（计划通过视频实现此功能），但此示例仅适用于图像）。将在同一个html页面上有一个Smugmug检查，多个Source更改。 Here is a jsfiddle我已经整理出来测试这一点。当我将smugmug.com/favicon.ico更改为smug1234mug.com/favicon.ico时，代码不会更改源图像。

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

从我所看到的，你有2个问题。第一个是关于使用三等于（===）的小问题，三等于运算符不仅检查值相等而且检查类型相等。

由于您在值声明，onload和onerror函数以及if语句中的数字中使用字符串，因此条件永远不会为真，因为"1"===1为false。您可以将条件更改为字符串，也可以只使用普通的双等号。

你遇到的第二个问题有点复杂，这是由于触发了各种事件的时间，你编写的代码只有在按特定顺序触发事件时才会起作用{{1函数依赖changeImage在调用时被正确设置，如果isSmugMug在changeImage加载之前被调用（或者没有）SMimage仍然是您的默认值价值isSmugMug

以下是解决第二个问题的示例：

在这里，我添加了一个变量来保存// 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); }检查是否已完成的状态，SMimage使用500毫秒间隔计时器等待changeImage检查完成后，检查完成后，计时器被删除，图像被更改。这不是一个完美的解决方案，特别是如果你在一个页面上有很多这些检查。

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

1 个答案: