檢查Internet連接，然後在網頁中更改JQuery/Javascript/Ajax中的圖像

我正在尋找javascript/jquery，我在我的網頁中設置了圖標圖像。檢查Internet連接，然後在網頁中更改JQuery/Javascript/Ajax中的圖像

如果沒有互聯網連接，那麼我的設置圖標圖像必須自動更改爲其他圖像。我知道我們可以在NavigatorOnLine.onLine的幫助下做到這一點，我可以通過點擊任何按鈕來實現這一點，但我希望它在頁面加載時自動加載。

圖片必須改變取決於開放的互聯網連接。下面的代碼僅供導航器onclick。我搜查了但沒有找到任何東西。

的JavaScript

function myFunction() 
    { 
    var x = "Is the browser online? " + navigator.onLine; 
    document.getElementById("demo").innerHTML=x; 
    }

這一切都在頁面加載發生沒有click事件電話： -

下面是更新後的代碼，在此我想檢查Internet連接或不。如果連接關閉，則「連接」將自動禁用（不可點擊），並且它的bgcolor更改爲紅色。

如果連接關閉'鏈接'將自動獲取啓用（可點擊），它的bgcolor更改爲綠色。但是我錯過了一些東西：

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css"> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script> 
</head> 
<style> 
.connected{ background-color:green;} 
.diconnected{background-color:green;} 
#link1{ 
    width: 100px; 
    height: 200px; 
    border: #0FF 1px solid; 
} 
</style> 
<body> 
<a href="#" id="link1"><img src="images/network.png"> My status</a> 

</body> 
<script> 
window.onload=function() { 
    var tId = setInterval(function() { 
    document.getElementById("link1").disabled=!navigator.onLine; 
    },500); 
    if (navigator.onLine) { 
     $("link1").bind('click', true).addClass('connected').removeclass('diconnected'); 

} else { 
    $('.link1').unbind('click', false); 
    $("link1").bind('click', true).addClass('diconnected').removeclass('diconnected'); 
} 

} 

</script> 
</html>

代碼在此先感謝。

來源

2014-03-12 Mike Phils

你在哪裏卡住？您無需點擊即可使'navigator.onLine'工作 –

簡單的在線狀態檢查解決方案：指向您知道在線的圖像並檢查錯誤事件。如果url不好（或者找不到圖片資源），你會得到一個錯誤事件。 https://developer.mozilla.org/en/docs/DOM/DOM_event_reference/error - 這裏是一個簡單的例子：http://jsfiddle.net/vD3Wm/（警告，提醒） – rlemon

如果沒有連接，您將需要在本地獲取圖像。

$(function() { 
    if (!navigator.onLine) $("#myImage").prop("src","data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="); 
});

假設

<img src="greendot.gif" id="myImage" />

您可以創建一個函數，並使用setInterval的，如果你想看到它的狀態之間切換運行：

$("#myImage").prop("src",navigator.online?"greendot.gif":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");

使用鏈接和超時

window.onload=function() { 
    var tId = setInterval(function() { 
    document.getElementById("link1").disabled=!navigator.onLine; 
    },500); 
} 

<a href="whatever.html" id="link1" onclick="return navigator.onLine">Click or not</a>

或usi ng你的更新中的一些代碼

$(function() { 
    $("link1").on('click',function(e) { 
    if (!navigator.onLine) e.preventDefault(); 
    }); 

    var tId = setInterval(function() { 
    $("link1").toggleClass('connected',navigator.onLine); 
    },500); 
});

來源

2014-03-12 16:43:04 mplungjan

好吧我不會使用圖像，如果如果沒有連接，我只想將該圖像設置爲不可點擊，以前在連接時可以點擊）。 –

查看更新與鏈接 – mplungjan

：謝謝先生。我贊同你。但我希望沒有任何點擊（按鈕/鏈接），我的按鈕/鏈接獲取啓用和禁用取決於互聯網的條件。 –

檢查Internet連接，然後在網頁中更改JQuery/Javascript/Ajax中的圖像

回答

相關問題