フラッシュなしで画像を更新し、ページを更新しません.
2363 ワード
>
<)xmlns="http://www.w3.org/1999/xhtml">>
＜meta http-equiv=「Content-Type」content=「text/html」charset=gb 2312/>
＜title＞test
＜script type=「text/javascript」＞
function change Image()
{
var date=new Date();
var minute=date.get Minutes()
var second=date.get Seconds()-1;
var path=「.\」+(second%10)+「.jpeg」
var bufferImage=new Image()//バッファ画像
bufferImage.src=path;
Dcument.getElemenntById(「イメージ」).src=bufferImage.src;
//alert(path)
)
set Interval(「changeImage()」,500);
〈アニメージュ〉src=“”width=“1366”height=“768”/><>
これは500ミリ秒ごとに画像を更新することができます.画像の名前は現在のシステムの時間で決定されます.点滅の原因は画像を更新する時、画像はまだ完全にロードされていないので、遅延が発生します.点滅という感じです.解決方法は、まずnewの一時的なImageオブジェクトで、このオブジェクトに画像をロードしてから、この一時的なオブジェクトから画像アドレスを取得することです.点滅問題を解決することができます.
//下はhttml 5を使って実現します.
<)xmlns="http://www.w3.org/1999/xhtml">>
＜meta http-equiv=「Content-Type」content=「text/html」charset=gb 2312/>
＜title＞test
＜script type=「text/javascript」＞
function change Image()
{
var date=new Date();
var minute=date.get Minutes()
var second=date.get Seconds()-1;
var path=「.\」+(second%10)+「.jpeg」
var bufferImage=new Image()//バッファ画像
bufferImage.src=path;
Dcument.getElemenntById(「イメージ」).src=bufferImage.src;
//alert(path)
)
set Interval(「changeImage()」,500);
〈アニメージュ〉src=“”width=“1366”height=“768”/><>
これは500ミリ秒ごとに画像を更新することができます.画像の名前は現在のシステムの時間で決定されます.点滅の原因は画像を更新する時、画像はまだ完全にロードされていないので、遅延が発生します.点滅という感じです.解決方法は、まずnewの一時的なImageオブジェクトで、このオブジェクトに画像をロードしてから、この一時的なオブジェクトから画像アドレスを取得することです.点滅問題を解決することができます.
//下はhttml 5を使って実現します.
<!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>