Question

我正在使用以下脚本通过下载image test.png来检查互联网连接。我遇到的问题是它只会下载一次图像。这意味着，如果在首次加载页面时有互联网连接，它将显示“在线” - 但是，如果我断开网络电缆，它将不会像应该那样说“离线”。

基本上，下载后，readyState将始终为“complete” - 但是，我想一次又一次地执行测试。

<script type="text/javascript">
setInterval('checkimage()', 1000);

function checkimage() {
    var imgTmp = new Image();
    imgTmp.src = 'test.png';
    if (imgTmp.readyState == 'complete') {
        document.getElementById('div1').innerHTML = "<font size=15 face=ariel color=green>Online</font>";
    } else {
        document.getElementById('div1').innerHTML = "<font size=15 face=ariel color=red>Offline</font>";
    }
}
</script>

非常感谢任何帮助！

Answer 1

我对整个解决方案感到怀疑，但是如果你想强制下载，那就是避免缓存，你可以替换

imgTmp.src = 'test.png';

与

imgTmp.src = 'test.png?t='+(new Date().getTime());

Answer 2

您的解决方案的问题是，您在设置源后立即检查readyState。请改用load和error事件。

function checkimage() {
    var imgTmp = new Image();
    imgTmp.onload = function() {
        printState("Online");
    };
    imgTmp.onerror = function() {
        printState("Offline");
    };
    imgTmp.src = "test.png?_=" + (+new Date());
}

function printState(state) {
    document.getElementById("div1").innerHTML = "<span style=\"font-size:15;font-face:'Arial'; color:green\">" + state + "</span>";
    setTimeout(checkimage, 5000);
}

不要将字符串用作setTimeout和setInterval

的第一个参数

无法每5秒下载一次图像

2 个答案: