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

我有一个带有视频和自定义视频控制按钮的HTML网站。例如，当您将鼠标悬停在“播放/暂停”按钮上时，它会使用CSS更改为具有不同颜色的播放按钮的不同照片，但如果您是在加载或重新加载页面后第一次浏览该按钮，则当您将鼠标悬停在该按钮上时，它将变为空白，因为它必须加载鼠标悬停时更改为的图像。我找到了一种方法来预加载从一开始就有数字名称的图像。我有一组缩略图，它们都有一个数字+“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);
}

for（变量x=1；x<5；x++）{
否=x.toString（）；
cs='img'+no+'=new Image（）；img'+no+”.src='media/“+no+”mo.png'；”；
评估（cs）；
}

但这只适用于从1mo.png到4mo.png的图像（4可以根据我要预加载的名称末尾带有“mo”的图片数量进行更改）

---

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

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

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

关于同一主题的问题：

下面是另一个PHP函数，它会有所帮助

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