Question

我有一段PHP代码片段，可以从目录中加载图像并将所有内容一次性全部输出到页面。我想知道如何添加一个接一个地加载图像的功能，而不是一次加载它们。

$path = "images/page1/";

if (is_dir($path)){
    $handle = opendir($path);
}
else{
    echo 'No image directory';
}

$directoryfiles = array();
while (($file = readdir($handle)) !== false) {
    $newfile = str_replace(' ', '_', $file);
    rename($path . $file, $path . $newfile);
    $directoryfiles[] = $newfile;
}

echo '<table>';
foreach($directoryfiles as $directoryfile){
        if(strlen($directoryfile) > 3){
        echo '<tr><td> <img src="'.$path.$directoryfile.'"/>';
        echo '<br>'.$path.$directoryfile.'</td></tr>';
        }
    }
echo '</table>';

closedir($handle);

感谢。

Answer 1

我认为不是建立一个图像表，而是放置第一个图像，我会将其他图像的url存储在javascript变量中。然后，当你想加载其他图像（计时器，点击事件......）时，你只需要改变原始图像的src参数。

Answer 2

你只能用PHP来做这件事，因为PHP将始终呈现页面并一次显示结果。如果您只想要效果，可以查看这个简单的jquery脚本：

How do I create a fade-in load effect, one after another image

Answer 3

看起来Jquery是方法：

var dir = "images/page1/";
var fileextension = [".png", ".jpg"];
$.ajax({
//This will retrieve the contents of the folder if the folder is configured a 'browsable'
url: dir,
success: function (data) {
    //Lsit all png file names in the page
    $(data).find("a:contains(" + (fileextension[0]) + "), a:contains(" + (fileextension[1]) + ")").each(function () { 
        var filename = this.href.replace(window.location.host,"").replace("http:///",    "");

            jQuery(document).ready(function () {
            //hide a div after 3 seconds
                setTimeout( "$("body").append($("<img src=" + dir + filename + "></img>"));",3000 );
            });
        });
    }
});

警告：此代码尚未经过测试，但它应该可以让您了解如何解决问题。

Answer 4

如果您使用output functions

，则可以使用PHP执行此操作

以下是一个示例，数字将一个接一个地显示：

for ( $i = 1 ; $i <= 10 ; $i++ )
{
    echo $i."\n";
    flush();
    ob_flush();
    sleep(1);
}

Answer 5

这可能适合你：

echo '<table>';
$delay=250;
foreach($directoryfiles as $directoryfile){
        if(strlen($directoryfile) > 3){
            echo '<tr><td data-delay='.$delay.'> <img src="'.$path.$directoryfile.'"/>';
            echo '<br>'.$path.$directoryfile.'</td></tr>';

            $delay+=250;    
        }
    }
echo '</table>';

用PHP一个接一个地加载图像。

5 个答案: