Question

这可能很简单，我已经考虑过尝试使用AJAX / Javascript进行此操作，但无法找到一个好方法。

我有这段代码：

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

我想要在每个图像之间按时间间隔加载图像。他们都是jpegs和相同的大小。

我想知道是否有办法用setInterval和AJAX加载它们？或者用PHP保存它？

Answer 1

我会将PHP设置为功能，就像RESTful API端点一样。

就像你的问题所暗示的那样，我可以使用jQuery＆＃39; $.getJSON和setInterval在你希望的任何时间段之后刷新图像。

以下是您如何实现这一目标的例子（还有许多其他方式）：

PHP文件（get-refresh-imgs.php）：

<?php
$dir = "uploads/*";

echo json_encode(glob($dir));
?>

JavaScript文件（ajax-refresh.js）：

$(function(){

  var intervalInMiliseconds = 10000;

  //comment out if you don't want to load images immediately
  refreshImgs();

  setInterval(function(){
    refreshImgs();
  }, intervalInMiliseconds);

  function refreshImgs(){
    var container = $('body'); //use whatever container you wish. I'm using body.

    $.getJSON('get-refresh-imgs.php', function(data){
      container.empty();
      data.forEach(function(el, indx, ary){
        container.append('<img src="' + el + '"/>');
      });
    });
  }

});

然后，将其包含在您的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>

Answer 2

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

$(document).ready(function(){

    setInterval(loadImages, 300000); //5 minutes

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

});

如果你把它与你当前的PHP代码放在一起 - 它应该每隔5分钟将它输出到div id=images_container

Answer 3

我的解决方案：

通过php一次性接收来自ajax的所有文件，然后使用setTimeout功能每隔X秒加载一次图像。这个演示完全可以使用4个图像。

<强> getImages.php

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

<强> images.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $.ajax({
       url: "http://888.com.de/stack/ajax_interval.php",
       dataType: "json",
       success: function(data){
            for(var i = 0; i < data.length; i++) {
                (function(i) {
                    setTimeout(function() {
                        $("#holder").append("<p><img src='"+data[i]+"'</p>");
                        }, 3000*i); //3000 = 3seconds
                    })(i);
                }      
            },
       failure: function(errMsg) {
            console.error("error:",errMsg);
       }
    });
});

</script>
</head>
<body>
<div id="holder"></div>
</body>
</html>

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

3 个答案: