如何在自动循环网页时进行干净的过渡?

时间:2015-05-06 20:24:43

标签: javascript jquery html

我目前正在尝试编写将显示我们持续集成系统当前状态的网页。让我先说一下,网络开发我的专业领域。我们这里没有任何网络开发人员,所以当我去的时候,我将进入所有这些盲目学习。请原谅我对当前用于网络开发的技术的无知。

主页面显示当前版本的状态。我有一个带有jQuery脚本的html页面,它不断刷新页面并加载查询MySQL数据库的php脚本。我使用的代码在这里,

<script src="./js/jquery-1.11.2.min.js"></script>
<script src="./js/jquery-1.11.2.js"></script>
<script>
     $(document).ready(function() {
        $("#refreshpage").load("index.php");
        var refreshId = setInterval(function() {
            $("#refreshpage").load('index.php');
            }, 5000);
        refreshId = null;
        $("#refreshpage").unload();
    });
    </script>
<body class=bground>
    <center>
        <div id="refreshpage"></div>
    </center>
</body>

页面需要自动重新加载,因此它将反映构建的当前状态,并且当前的设置可以很好地工作。我想通过添加额外的页面来扩展这一点,这些页面将传递来自各种来源的其他相关信息。由于这需要是最新的,我使用上面相同的代码我们稍微改变另外两页。

由于每个页面都需要刷新才能保持最新信息,因此我决定在三个单独的页面上循环浏览每个页面,类似于此处使用的技术How to auto refresh cycle multiple website page under one browser window like screen saver?。 我使用的代码是:

<script type="text/javascript" charset="utf-8">
    var sites = [
        "http://build/index.html",
        "http://proj1/next.html",
        "http://proj2/last.html"
    ];
    var activePage = sites.length;

    $(document).ready(function () {
        var $iframe = $("iframe").attr("src","http://build/index.html");
        setInterval(function() {
            (activePage == 0) ? activePage = sites.length -1 : activePage = currentSite -1;
                            $iframe.attr("src",sites[activePage]);
        }, 10000);
    });
  </script>
 </head>
 <body>
    <iframe></iframe>
 </body>

这个工作正常,除非它循环到下一页它闪烁为白色。我知道你可以在一个页面上预先加载东西,但是有人知道在网页上骑自行车时的正确方法,所以你看不到那个跳跃吗?

1 个答案:

答案 0 :(得分:0)

在覆盖de src然后覆盖FadeOut之前使用fadeIn会更好吗?只是说。