Eliminate flicker in firefox brower

AllskyTeam · Oct 20, 2023 · ae8d384 · ae8d384
1 parent e7c22d6
commit ae8d384
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 19 deletions.
diff --git a/html/index.php b/html/index.php
@@ -193,20 +193,27 @@ function SaveTORAndVPNConfig() {}
 
 	<script type="text/javascript">
 		function getImage() {
-			var img = $("<img />").attr('src', '<?php echo $image_name ?>?_ts=' + new Date().getTime())
-				.attr("id", "current")
-				.attr("class", "current")
-				.css("width", "100%")
-				.on('load', function () {
-					if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
-						console.log('broken image!');
-						setTimeout(function () {
-							getImage();
-						}, 500);
-					} else {
-						$("#live_container").empty().append(img);
-					}
-				});
+			var newImg = new Image();
+			newImg.src = '<?php echo $image_name ?>?_ts=' + new Date().getTime();
+			newImg.id = "current";
+			newImg.class = "current";
+			newImg.style = "width: 100%";
+			newImg.decode().then(() => {
+				$("#current").attr('src', newImg.src)
+					.attr("id", "current")
+					.attr("class", "current")
+					.css("width", "100%")
+					.on('load', function () {
+						if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
+							console.log('broken image!');
+							setTimeout(function () {
+								getImage();
+							}, 500);
+						} else {
+							$("#live_container").empty().append(newImg);
+						}
+					});
+			});
 		}
 
 		// Inititalize theme to light
@@ -284,7 +291,7 @@ function getImage() {
 					</li>
 					<li>
 						<a id="module" href="index.php?page=module"><i class="fa fa-bars fa-fw"></i> Module Manager</a>
-					</li>						
+					</li>
 					<li>
 						<a id="LAN" href="index.php?page=LAN_info"><i class="fa fa-network-wired fa-fw"></i> <b>LAN</b> Dashboard</a>
 					</li>
@@ -445,7 +452,7 @@ function getImage() {
 						break;
 					case "module":
 						DisplayModule();
-						break;						
+						break;
 
 					case "live_view":
 					default:
@@ -523,7 +530,7 @@ function topFunction() {
 			document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
 		}
 	}
-<?php 
+<?php
 	}
 ?>
 </script>

diff --git a/html/public.php b/html/public.php
@@ -30,7 +30,13 @@
 
 <script type="text/javascript">
 	function getImage(){
-		var img = $("<img />").attr('src', '<?php echo $image_name ?>?_ts=' + new Date().getTime())
+		var newImg = new Image();
+		newImg.src = '<?php echo $image_name ?>?_ts=' + new Date().getTime();
+		newImg.id = "current";
+		newImg.class = "current";
+		newImg.style = "width: 100%";
+		newImg.decode().then(() => {
+			$("#current").attr('src', newImg.src)
 			.attr("id", "current")
 			.attr("class", "current")
 			.css("width", "100%")
@@ -41,9 +47,11 @@ function getImage(){
 						getImage();
 					}, 500);
 				} else {
-					$("#live_container").empty().append(img);
+					$("#live_container").empty().append(newImg);
 				}
 			});
+		});
+
 	}
 
 	setInterval(function(){