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

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

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

Answer 2

正如我所看到的，您提到了Cordova标签，所以我假设它是针对移动应用程序的。

您可以使用imgcache将图像存储在缓存中

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

但是如果您的应用程序甚至没有连接到互联网，这将无法正常工作，因为那样便没有文件可供参考。

让我知道您是否遇到任何困难。

欢呼

Answer 3

在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");
}

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

3 个答案: