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脚本。也许它们不能一起工作？

Head:

<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" />

谢谢。

- Tom

---

你确定它实际上没有运行多次吗？在那里抛出一个alert()或console.log()以确保。我想知道它是否实际上缓存了rotate.php的结果，如果是这样，在URL的末尾添加当前时间。 - Blair McMillan

是的，你的代码没有问题。我怀疑是缓存的原因。 - Gregg

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函数中随机化照片。就像上面所示。不要使用rotate.php;只需加载random.php。

- bozdoz

Answer 2

针对我的评论进行扩展，如果这是一个缓存问题，那么您可以更新您的代码：

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

这将导致每次请求时URL不同，从而避免缓存问题。

- Blair McMillan

---

但是加载的图像标签仍将保持不变，因此图像不会重新加载。 - Guffa

Answer 3

问题不在于setInterval，而是图片的缓存。当图片标签被加载时，它看起来与之前的完全相同。浏览器不会再次加载图片，而是直接使用已经加载的那个。

如果你想重新加载图片，请将你的rotate.php更改为在URL中包含计数器或随机数作为参数，返回类似于以下内容的东西：

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

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

- Guffa

---

你可能需要使用ajax方法而不是load，以防止 AJAX 请求被缓存：$.ajax({cache:false,dataType:'html',url:'images/gallery/best/rotate.php',success:function(data){$('#center').html(data);}}); - Guffa

Answer 4

问题可能是浏览器已将random.php加载到缓存中。我认为最好为每个图像提供自己的URL并使用它。然后，一个php页面可以仅呈现src：

var refreshId = setInterval(function () {
  $.get('random-src.php', function (result) {
    $('#center>img').attr('src') = result;
  },'text');
},5000);

然后 random.php 可以随机返回 img/img1.jpg，img/img2.jpg 等等。

或者，您可以在 random.php 文件的顶部添加 header("Cache-Control: no-cache, must-revalidate"); 来防止浏览器缓存。

- Nathan MacInnes

---

JQuery代码没有返回任何内容，头部也没有发生变化。 - Tom