网页的动态刷新

有时候我们编写网页时需要实时对网页的内容进行刷新,但是频繁的刷新整个网页会严重影响用户的体验,所以需要在不刷新整个网页的前提下,对网页中的某个局部进行刷新。

例如对于网页代码

<html>
<head>
<h1 style="text-align: center;">局部刷新图片</h1>
</head>
<body>
<div style="text-align: center;">
<img id="picture" src="picture.jpg" style="width: 80%;height: 80%;">
</div>
</body>
</html>

显示结果为

技术分享图片

 现在希望当电脑中的picture.jpg的内容有史迪奇变为火焰球时,网页中的内容能够实时改变过来。

动态刷新的功能可以通过jQuery中的setInterval来实现,setInterval(func,time)函数每隔time时间会自动运行一次func函数,所以只需要在func函数中在为<img>标签的src属性重新赋值即可。但是因为浏览器自带缓存功能,如果新的赋值与原来相同,浏览器就会直接使用缓存中的结果,而不会再读取一次图片,所以在src路径当中要加入一个随机数,保证两个src不完全相同。实现之后的程序为

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<h1 style="text-align: center;">局部刷新图片</h1>
</head>
<body>
<div style="text-align: center;">
<img id="picture" src="picture.jpg" style="width: 80%;height: 80%;">
</div>
<script type="text/javascript">
function flush(){
var rand = Math.round(Math.random()*1000);
$(#picture).attr(src, picture.jpg?v=+rand);
}
setInterval(flush, 500);
</script>
</body>
</html>

这样在打开网页之后,如果将图像picture.jpg删除或更改,网页的内容也会随之变化。

网页的动态刷新

原文:https://www.cnblogs.com/sunlightheart/p/15310079.html

以上是网页的动态刷新的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>