當離線或在線連接到互聯網時，如何更改我的圖片，

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>

我想添加一個功能，通過該功能可以更改圖像，具體取決於用戶與Internet的連接是脫機還是在線

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