jQuery：设置间隔答案

【问题标题】：jQuery: setIntervaljQuery：设置间隔
【发布时间】：2010-12-04 18:27:38
【问题描述】：

我想在我的网站上制作幻灯片，但问题是 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>

旋转.php

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

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

忘了提，我也有灯箱脚本。也许他们不一起工作？

头：

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

谢谢。

【问题讨论】：

您确定它实际上没有运行多次吗？在那里抛出一个 alert() 或 console.log() 来确定。我想知道它是否真的缓存了 rotate.php 的结果，在这种情况下，将当前时间附加到 URL 的末尾。
是的，您的代码没有问题。我怀疑缓存。

标签： jquery html caching

【解决方案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。

【讨论】：

【解决方案2】：

扩展我的评论，如果它是一个缓存问题，那么你可以更新你的代码

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

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

【讨论】：

但是加载的图片标签看起来还是一样的，所以不会重新加载图片。

【解决方案3】：

问题不是setInterval，而是图像的缓存。加载图像标签后，它看起来与之前的完全一样。浏览器不会再次加载图像，它只是使用已经加载的图像。

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

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

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

【讨论】：

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

【解决方案4】：

问题可能是浏览器已将random.php 加载到缓存中。我认为你最好给每张图片它自己的网址并使用它。那么一个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等。

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

【讨论】：

jquery 代码没有返回任何内容，标题也没有改变。