jQuery: setInterval

Question

我想在我的网站上做一个幻灯片，但问题是setInterval只能工作一次。它只加载我的文件一次结束，然后停止。

下面是代码: main.html

<img src="images/ex/full.jpg" width="800" height="377" alt="">
<script>
    $(document).ready(function(){
        var refreshId = setInterval(function(){
            $('#center').load('images/gallery/best/rotate.php');
        }, 5000);
    });
</script>

rotate.php

<img src="images/gallery/best/random.php?".<?php echo rand(0,1000) ?>."" width="800" height="377" alt="">

random.php包含一个代码，可以从选定的文件夹中加载随机图像，效果很好。

忘了提一下，我也包含了lightbox脚本。也许他们不在一起工作？

标题：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="vendors/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="vendors/js/prototype.js"></script>
<script type="text/javascript" src="vendors/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="vendors/js/lightbox.js"></script>
<link rel="stylesheet" href="styles/style.css" type="text/css" />
<link rel="stylesheet" href="styles/lightbox.css" type="text/css" />

谢谢。

Answer 1

<script>
$(document).ready(function(){
    var refreshId = setInterval(function(){
    var r = (-0.5)+(Math.random()*(1000.99));
        $('#center').load('images/gallery/best/random.php?'+r);
    }, 5000);
});
</script>

那个怎么样？

--

编辑

对不起，我的意思是你应该在setInterval函数中随机化照片。如上所示。只需加载random.php，而不是rotate.php。

Answer 2

根据我的评论，如果这是一个缓存问题，那么您可以使用以下命令更新代码

<script>
$(document).ready(function(){
    var refreshId = setInterval(function(){
        $('#center').load('images/gallery/best/rotate.php?' + new Date().getTime());
    }, 5000);
});
</script>

这将导致每个请求的url不同，从而避免您的缓存问题。

Answer 3

问题不在于setInterval，而在于图像的缓存。加载图像标记时，它看起来与之前的完全相同。浏览器不会再次加载图像，它只使用已经加载的图像。

如果您想再次加载图像，请更改您的rotate.php，使其包含一个计数器或随机数作为参数，返回的内容例如如下所示：

<img src="images/gallery/best/random.php?98037465936" width="800" height="377" alt="">

通过在每次加载标记时更改URL，浏览器每次都必须加载新图像。