定時不閃爍重新整理圖片，不重新整理頁面

阿新 • • 發佈：2019-01-14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<script type="text/javascript">
function changeImage()
{
var date = new Date();
var minute = date.getMinutes();
var second = date.getSeconds() - 1;
var path = ".\\" + (second%10) + ".jpeg";
var bufferImage = new Image(); //緩衝圖片
bufferImage.src = path;
document.getElementById("image").src=bufferImage.src;
//alert(path);
}

setInterval("changeImage();", 500);
</script>

</head>
<img id ="image" src="" width="1366" height="768" /><>
</body>

</html>

這是完成每500毫秒重新整理一次圖片，其中圖片的名字以當前系統的時間確定。閃爍的原因是重新整理圖片時，圖片還沒有完全載入，所以會出現延遲，給人的感覺就是閃爍。解決的方法是先new一個臨時Image物件，先把圖片載入這個物件內，然後在從這個臨時物件中獲取圖片地址。這樣可以解決閃爍問題。

//下面使用html5實現

<!DOCTYPE HTML>  
<html>  
<body>  
  
<canvas id="myCanvas" width="1366" height="768" style="border:1px solid #c3c3c3;">  
Your browser does not support the canvas element.  
</canvas>  

<FONT SIZE=1 id = "F1"></FONT>
<FONT SIZE=1 id = "F2"></FONT>

<script>
var i_width=window.document.body.clientWidth//網頁可用寬度
var i_height=window.document.body.clientHeight;
var pic = document.getElementById("myCanvas");
pic.style.height=i_height+"px";
pic.style.width=i_width+"px";
</script>
<script type="text/javascript">  
	var n = 0;
	var image=new Image();//放入函式裡面：瀏覽器執行一分鐘左右系統記憶體用到高達90%，故做一個全域性的反衝圖片
	function changeImage()
	{ 
		var canvas=document.getElementById("myCanvas");  
		var cxt=canvas.getContext("2d");
		//ctx.restore();
		image.src="0.jpg"; 
		image.onload = function () //確保圖片已經載入完畢  
		{  
			n=n+1;
			n=n%100;
			document.getElementById("F1").innerHTML="N:"+n;
			if (image.complete)//如果圖片載入完成，繪製
				cxt.drawImage(image,0,0);  
			else
				alert(image.complete);
			
		}  
		image.onerror=function(){  
			document.getElementById("F2").innerHTML="error N:"+n; 
		};  
		//ctx.save();
  }

  setInterval("changeImage();", 100);
</script>  
  
</body>  
</html>

定時不閃爍重新整理圖片，不重新整理頁面

定時不閃爍重新整理圖片，不重新整理頁面

UIWebView載入html，不顯示資源圖片，不載入css樣式

EAS"正在重新整理庫存，不允許稽核！"問題解決方案

asp.net 點選重新整理按鈕，只重新整理驗證碼，不重新整理整個頁面

解決RecyclerView中使用UIL載入網路圖片，在重新整理時出現閃爍問題

Java新增背景圖片，不遮蓋其他容器

PHP驗證碼不能生成圖片，原因解決

OpenCV問題集錦，圖片顯示不出來，WaitKey(0),imread()不能讀圖片，未經處理的異常，等問題集合

Glide載入相同地址圖片，不快取

try catch 小結， node的回調callback裏不能捕獲異常，不能被v8優化（現在能了），

vipkids騙局？vipkid不想學了，不能退款嗎？

解決虛擬機連接不上外網，不能互相ping通

新媒之家不一樣的社群，不一樣的理念

在openwrt板子上突然發現不能ping 域名，不能ping 外網IP，也無法ping其他電腦

頁面的字型不能定死，會隨著頁面改變的大小。

FileZilla無法連線到伺服器,不安全的伺服器，不支援 FTP over TLS?

jsp頁面不顯示easyUI效果，不能識別匯入的jquery路徑，不能使用el表示式的解決辦法

自動重新整理網頁，自動重新整理當前頁面，JS呼叫

C++Builder6.0 啟動引數設定，不開啟預設工程，不顯示啟動畫面

不看OCJP考題，不會知道自己的Java基礎有多差(一)

定時不閃爍重新整理圖片，不重新整理頁面

相關推薦