网页的动态刷新

2021-09-18 20:35:23 阅读：198 来源： 互联网

标签：src 网页 picture setInterval func 刷新动态

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

例如对于网页代码

<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删除或更改，网页的内容也会随之变化。

标签：src,网页,picture,setInterval,func,刷新,动态
来源： https://www.cnblogs.com/sunlightheart/p/15310079.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

网页的动态刷新