CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Mike Phils
Mike Phils

Reputation: 3505

Checking Internet connection and then changing image in JQuery/Javascript/Ajax in webpage

I am looking for javascript/Jquery, I have setting icon image in my web page.

If there is no internet connection then my setting icon image must change automatically to other image. I know we can do with help of NavigatorOnLine.onLine, I can achieve this by any button click but I want it should load automatically, when page load.

Image must change depend open internet connection.Below code just for navigator onclick. Ihave searched but did not find any thing.

javascript

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

This all happen on page load without click event call:-

Here is updated code, In this I am trying to check internet connection is on or not. If connection is off then 'link' on the will be automatically disable(non clickable) and it bgcolor changes to red.

And if connection is off 'link' will be automatically get enable(clickable) and it bgcolor changes to green. However I am missing some thing:

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

Code Thanks in advance.

Upvotes: 0

Views: 834

Answers (1)

mplungjan
mplungjan

Reputation: 178094

You will need to get the image locally if there is not connection.

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

assuming

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

You can create a function and run it using setInterval if you want to see it change between states:

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

Using a link and timeout

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>

Or using some of the code from your update

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

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

Upvotes: 2

Related Questions