您的位置：首页 > 其它

定时不闪烁刷新图片，不刷新页面

2014-11-10 22:26 316 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航