JavaScript 从站点目录预加载随机命名的图像

Question

我有一个带有视频和自定义视频控制按钮的 HTML 网站。例如，当您将鼠标悬停在播放/暂停按钮上时，它会使用 CSS 更改为具有不同颜色的播放按钮的不同照片，但是如果您是在加载或重新加载页面后第一次经过它，它会变为空白当您将鼠标悬停在它上面时，因为它必须加载它在悬停时更改为的图像。我找到了一种预加载具有从 1 开始的数字名称的图像的方法。我有一组缩略图，它们都有一个数字 + 'mo.png' 作为名称。它是 1mo.png、2mo.png 等等。我使用这种方法自动预加载它们:

for(var x = 1; x < 5; x++){
    no = x.toString();
    cs = 'img' + no + ' = new Image(); img' + no + ".src = 'media/" + no + "mo.png';";
    eval(cs);
}

但这仅适用于从 1mo.png 到 4mo.png 的图像(可以根据我要预加载的名称末尾带有“mo”的图片的数量来更改 4)。

我希望 JavaScript 遍历我目录中的图像文件夹，并使用我用于“mo”图像的相同方法预加载它找到的具有任何随机名称的任何图像。几乎所有我需要知道的是如何从我站点自己的目录中的某个文件夹中获取文件名并将它们存储在数组或变量中。

Answer 1

浏览器中的客户端 Javascript 无法直接访问您服务器的目录。 Node、Ruby、Python 和 PHP 等任何服务器端语言都可以解析您的文件和目录。

我会用您选择的语言设置一个脚本，将文件夹内容作为 jsonp 返回，这样您就可以从其他域调用它而不会出现跨站点脚本错误。然后通过 Javascript 中的 ajax 请求该文件夹内容脚本。

关于同一主题的问题:

list all images in directory in JSON

这是另一个有用的 PHP 函数。

print_r(scandir('/var/www/yoursite.com/media'));

http://www.php.net/manual/en/function.scandir.php