我正在寻找 javascript/Jquery，我在我的网页中设置了图标图像。
如果没有互联网连接，那么我的设置图标图像必须自动更改为其他图像。我知道我们可以在 NavigatorOnLine.onLine 的帮助下做到这一点，我可以通过单击任何按钮来实现这一点，但我希望它应该在页面加载时自动加载。
图像必须根据打开的互联网连接进行更改。以下代码仅适用于导航器 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>
代码 提前致谢。
最佳答案
如果没有连接，则需要在本地获取图像。
$(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>
或者使用更新中的一些代码
$(function() {
$("link1").on('click',function(e) {
if (!navigator.onLine) e.preventDefault();
});
var tId = setInterval(function() {
$("link1").toggleClass('connected',navigator.onLine);
},500);
});
关于javascript - 检查互联网连接，然后在网页中的 JQuery/Javascript/Ajax 中更改图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22357998/