Javascript 每隔一段时间从目录加载图像

这可能很简单，我已经研究过如何使用AJAX/Javascript实现这一点，但找不到一个好方法

我有以下代码：

<?php
$dir = "uploads/*";
foreach(glob($dir) as $file)
{
echo '<img src="'.$file.'">';
}
?>

我希望图像在每幅图像之间有一定的时间间隔。它们都是JPEG格式，大小相同

---

我想知道是否有办法用setInterval和AJAX加载它们？或者将其全部保存在PHP中？

这里是一个JS文件示例，可用于您的目的。这非常简单——ajax被放入一个函数中，并使用5分钟的setInterval（）调用该函数

$(document).ready(function(){

    setInterval(loadImages, 300000); //5 minutes

    function loadImages() {
        $("#images-container").load("/your_script.php");
    }

});

---

如果你把它和你当前的php代码放在一起，它应该每5分钟将它的输出加载到带有

id=images\u container

的div中，我会把你的php设置成一个RESTful API端点

正如您的问题所建议的，我可以在您希望的任何时间之后使用jQuery和刷新图像

以下是您如何实现这一目标的示例（有很多其他方法）：

PHP文件（获取refresh imgs.PHP）：

JavaScript文件（ajax refresh.js）：

$（函数（）{
var intervalInMiliseconds=10000；
//如果不想立即加载图像，请将其注释掉
刷新imgs（）；
setInterval（函数（）{
刷新imgs（）；
}，间隔毫秒）；
函数refreshImgs（）{
var container=$（'body'）；//使用您想要的任何容器。我正在使用body。
$.getJSON（'get-refresh-imgs.php'，函数（数据）{
container.empty（）；
forEach（函数（el、indx、ary）{
容器。附加（“”）；
});
});
}
});

然后，将其包含在HTML文件中：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="ajax-refresh.js"></script>

---

我的解决方案：

通过

ajax

立即从

php

接收所有文件，然后使用

setTimeout

函数每隔

X

秒加载一次图像。此演示具有4幅图像，功能齐全

getImages.php

<?php
echo json_encode(glob("upload/*"));
?>

images.html

$（文档）.ready（函数（）{
$.ajax({
url:“http://888.com.de/stack/ajax_interval.php",
数据类型：“json”，
成功：功能（数据）{
对于（变量i=0；i

让PHP输出一个图像URL数组。在客户端，

setInterval（）

函数可以一次提取一个数组项，使用

document.createElement（）

构建图像，并将其附加到当前包含上述代码的任何容器中。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="ajax-refresh.js"></script>

<?php
echo json_encode(glob("upload/*"));
?>