Как я могу изменить свое изображение, когда подключение к Интернету происходит в автономном режиме или онлайн,

Question

        <script>


            function myFunction() {

                if (navigator.onLine) {
                    swal("Great News" , 'Congratulation your connection is online', "success");
                } else {
                    swal("Sad News" , 'Can you please connect to the internet to login', "error");
                }

            }

            </script>

Я хотел бы добавить функцию, с помощью которой изображение меняется в зависимости от того, подключено ли пользователь к Интернету в автономном режиме или онлайн

Answer 1

Как я вижу, вы упомянули тег Cordova, поэтому я предполагаю, что это для мобильного приложения.

Вы можете сохранить изображение в кеше, используя imgcache

https://github.com/chrisben/imgcache.js/

но это не сработает, если ваше приложение не подключилось к Интернету хотя бы один раз, потому что тогда у него не будет файла для справки.

Дайте мне знать, если вы найдете какое-либотрудности.

ура

Answer 2

в HTML:

<img id="imgID" src="img.png"/>

в JavaScript:

if(navigator.network.connection.type == Connection.NONE){
   console.log("device is offline");
    //you can now call picture from your folder
    $("#imgID").attr("src","img.png");

}else{
   console.log("device is online");
   //you can now call picture from internet like this
   $("#imgID").attr("src","https://website.com/img.png");
}

Answer 3

Вы можете установить пользовательскую функцию, такую ​​как

 window.addEventListener("online" , _=>{
            //set image online
        })
        window.addEventListener("offline" , _=>{
            //set image offline
        })

, как

        
 

            
 var img1 = document.getElementById("wifi-image")       
 function changeimage(online){
 
 if(online) {
 img1.src ="online-wifi.png"
 img1.alt ="online-wifi.png"
 }
 else{
 img1.src ="offline-wifi.png"
  img1.alt ="offline-wifi.png"
 }
}

 window.addEventListener("online" , _=>{
                //set image online
 changeimage(true)
            })
            window.addEventListener("offline" , _=>{
                //set image offline
 changeimage(false)
            })
            
            // at start
             changeimage(navigator.onLine)

<img id="wifi-image" src="" alt="online-mode">