时间戳

首页 > 解决方案 > 当离线或在线连接到互联网时，如何更改我的图像，

javascript - 当离线或在线连接到互联网时，如何更改我的图像，

问题描述

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

我想添加一个功能，根据用户连接到互联网是离线还是在线来更改图像

标签： javascripthtmlcsscordova

解决方案

您可以设置自定义功能，例如

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

推荐阅读