Question

我正在通过他的照片网站oneonethousand.org帮助我的朋友。他想要从他放在目录中的照片自动生成照片库。我对Ajax没有经验，并认为使用它可能太复杂了。

我认为最好的方法是使用PHP来识别目录中照片的URL，并以某种方式将这些URL发送到JavaScript，以便JavaScript可以预先加载它们，然后在选择相应的照片按钮时显示它们该网站。

我比较熟悉PHP和JavaScript（JQuery），但我不太确定最佳实践对于我需要做什么。

重申一下：他想要做的是将照片放在目录中，PHP在该目录中搜索照片名称，并将这些URL传递给JavaScript，以便它们可以预加载它们。

你怎么推荐这个？

Answer 1

我可能会使用AJAX来做到这一点，但你当然不必这样做。在浏览器加载的页面中，您可以使PHP打印Javascript，如下所示：

$HTML  = '<script type="text/javascript">' . "\n";
$HTML .= 'var ImageCache = [];'            . "\n";

foreach (glob('Path/To/Images/*.jpg') as $Image))
{
    $HTML .= 'ImageCache.push("' . $Image . '");' . "\n";
}

$HTML .= 'for (var i in ImageCache) {'                 . "\n";
$HTML .= "\t" . 'var Source = ImageCache[i]; '         . "\n";
$HTML .= "\t" . 'ImageCache[i] = new Image(100, 100);' . "\n";
$HTML .= "\t" . 'ImageCache[i].src = Source;'          . "\n";
$HTML .= '}';

$HTML .= '</script>';

Answer 2

您通常会使用像glob这样的函数来获取所有图像文件的列表，然后直接在页面中嵌入链接，或者按照您的建议使用javascript。

像这样......

$files = glob("/image/dir/*.{jpg,jpeg,gif,png}", GLOB_BRACE);

$js = "var images = new Array();\n";

foreach( $files as $i => $file ) {
    $fileName = basename($file);
    $js .= "images[$i] = '$fileName';\n";
}

将$ js作为Javascript添加到您的页面将为您提供一个图像名称列表，客户端，您可以根据需要使用它。

Answer 3

要将数据从PHP传输到javascript，您可以使用XML或JSON。 PHP为两者提供了函数和类。

使用JSON非常简单

有关PHP和JSON的更多详细信息，请参阅http://www.php.net/manual/en/book.json.php

有关使用JavaScript解码数据的信息，请阅读此http://json.org/js.html

编辑：如果你在php中生成你的javascript，你可以用JSON编码一个数组，并使用生成的代码来声明一个JavaScript数组。

echo <<<END
<script>
...
var images = {$JSONEncodedArray};
...
</script
END;

Answer 4

使用PHP动态生成JavaScript文件的一部分，如下所示：

var slideshowImages = [<?php
$files_in_folder = /* get the files somehow */;
foreach($files_in_folder as $file) {
     echo "\"$file\",";
}
?>null]; // Make sure to skip the last element

如果它实际上是一个单独的文件，您可能需要为.js文件提供.php扩展名。

使用PHP将照片URL发送到JavaScript

4 个答案: