使用 PHP 将照片 URL 发送到 JavaScript

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 扩展名，如果它实际上是一个单独的文件。