我有一个包含视频和自定义视频控制按钮的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通过我目录中的images文件夹，并使用我用于'mo'图像的相同方法预加载任何随机名称的图像。几乎所有我需要知道的是如何从我站点自己的目录中的某个文件夹中获取文件名，并将它们存储在一个或多个数组中。
答案 0 :(得分：0)
浏览器中的客户端Javascript无法直接访问服务器的目录。任何服务器端语言（如Node，Ruby，Python和PHP）都可以解析您的文件和目录。
我将使用您选择的语言设置一个脚本，将脚本文件内容作为jsonp返回，这样您就可以从其他域调用它而不会出现跨站点脚本错误。然后通过Javascript中的ajax请求该文件夹内容脚本。
关于同一主题的问题：
list all images in directory in JSON
这是另一个有用的PHP函数。
print_r(scandir('/var/www/yoursite.com/media'));