[英]How can i change my image when connection to internet is fired offline or online,
<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>
I would like to add a function whereby the image is changed depending whether the users connection to the internet is offline or online 我想添加一个功能,通过该功能可以更改图像,具体取决于用户与Internet的连接是脱机还是在线
you can set a custom function like 您可以设置自定义功能,例如
window.addEventListener("online" , _=>{
//set image online
})
window.addEventListener("offline" , _=>{
//set image offline
})
like 喜欢
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">
As I can see that you have mentioned Cordova tag, So I'm assuming that it is for a mobile app. 正如我所看到的,您提到了Cordova标签,所以我假设它是针对移动应用程序的。
You can store the image in the cache by using imgcache 您可以使用imgcache将图像存储在缓存中
https://github.com/chrisben/imgcache.js/ https://github.com/chrisben/imgcache.js/
but this will not work if your app has not connected to the internet even once because then it'll not have a file for reference. 但如果您的应用程序甚至没有连接到互联网,这将无法正常工作,因为那样便没有文件可供参考。
Let me know if you find any difficulties. 如果您有任何困难,请告诉我。
cheers 干杯
in HTML : 在HTML中:
<img id="imgID" src="img.png"/>
in JavaScript : 在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");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.