检查Internet连接，然后在网页的JQuery/Javascript/Ajax中更改图像_Javascript_Jquery_Html_Jquery Mobile

检查Internet连接，然后在网页的JQuery/Javascript/Ajax中更改图像

javascript jquery html jquery-mobile

检查Internet连接，然后在网页的JQuery/Javascript/Ajax中更改图像,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,我正在寻找javascript/Jquery，我在我的网页中设置了图标图像如果没有internet连接，则我的设置图标图像必须自动更改为其他图像。我知道我们可以借助NavigatorOnLine.onLine，我可以通过单击任何按钮来实现这一点，但我希望它应该在页面加载时自动加载图像必须更改，这取决于打开internet连接。下面的代码仅用于导航器onclick。我已经找过了，但什么也没找到 javascript function myFunction() { var x

我正在寻找javascript/Jquery，我在我的网页中设置了图标图像

如果没有internet连接，则我的设置图标图像必须自动更改为其他图像。我知道我们可以借助NavigatorOnLine.onLine，我可以通过单击任何按钮来实现这一点，但我希望它应该在页面加载时自动加载

图像必须更改，这取决于打开internet连接。下面的代码仅用于导航器onclick。我已经找过了，但什么也没找到

javascript

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

这一切都发生在页面加载时，无需单击事件调用：-

这里是更新的代码，在这里我试图检查互联网连接是否打开。如果连接已关闭，则上的“链接”将自动禁用（不可单击），并且颜色将变为红色

如果连接关闭，“链接”将自动启用（可单击），颜色将变为绿色。然而，我遗漏了一些东西：

<!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>


.connected{背景色：绿色；}
.diconnected{背景色：绿色；}
#链接1{
宽度：100px；
高度：200px；
边框：#0FF 1px实心；
}
window.onload=function（）{
var tId=setInterval（函数（）{
document.getElementById（“link1”）.disabled=！navigator.onLine；
},500);
if（navigator.onLine）{
$（“link1”）.bind（'click'，true.）.addClass（'connected'）.removeclass（'diconnected'）；
}否则{
$（'.link1'）。取消绑定（'click'，false）；
$（“link1”）.bind（'click'，true.）.addClass（'diconnected'）.removeclass（'diconnected'）；
}
}

代码

提前感谢。

如果没有连接，您需要在本地获取图像

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

假定

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

使用链接和超时

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>

你被困在哪里了？？？您无需单击即可获取

导航器。联机可简化检查联机状态的解决方案：指向已知联机存在的图像并检查错误事件。如果url不正确（或找不到图像资源），则会出现错误事件。-这里是一个简单的例子：（警告，警报）好的，我不会使用图像，如果我只是想使该图像在没有连接的情况下不可点击，以前在有连接的情况下它是可点击的。）：谢谢先生。我同意你的看法。但我希望在不点击任何按钮/链接的情况下，我的按钮/链接根据互联网状况启用和禁用
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>

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

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