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

Question

我有这个 PHP 代码的 sn-p 代码，它从目录中加载图像并将它们一次全部扔到页面上。我想知道如何添加一个一个接一个地加载图像的功能，而不是一次加载它们。

$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);
}

• flush()
• ob_flush()

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>';