2014-05-17 107 views
0

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); 
} 

但是,只适用于从1mo.png到4mo.png去图像(4可以基于与“莫”多少张照片被改变在他们的名字的末尾,我想预先加载)。

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

回答

0

客户端JavaScript在浏览器中不会有你的服务器的目录直接访问。任何服务器端语言,比如Node,Ruby,Python和PHP都可以解析你的文件和目录。

我会成立一个脚本在您选择的返回文件夹的内容为JSONP,所以你可以从其他领域调用它没有一个跨站点脚本错误的语言。然后通过Javascript中的ajax请求该文件夹内容脚本。

关于同一主题的SO问题:

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