使用jQuery预加载目录中的所有图像

我想将所有图像预加载到名为img的目录中，并且该目录还包含名为ui_images的子目录。使用jQuery预加载目录中的所有图像

我知道如何通过将其名称放入数组中并执行预加载工作来预加载特定图像，但我想知道如何告诉脚本动态搜索该目录中的所有图像img和img/ui_images？

这里是我的代码：

var preloadImg = function(imgArr){ 
    $.each(imgArr, function(index,value){ 
     $("<img/>")[0].src = value; 
    }); 
} 

var arrimg = ['img/check.png','img/add_sub.png']; 
preloadImg(arrimg);

来源

2012-09-09 Rafael Adel

有没有办法做到这一点。至少，没有好方法。 Http没有提供像目录列表或类似的东西。所以客户必须基本上尝试每个可能的文件名。你可以做的是让你的服务器代码调查目录并将所有文件转储到jquery消耗的JS数组中。 –

有在HTTP做一个目录列表没有一般可用设施。我能想到的选项是：

名称您在可预见的方式类似（img001，img002等）的图像，然后，直到你得到一个错误，您可以加载图像。
以可预测的方式为您的图像命名（如img001，img002等），然后将一个数字限制值编码到您的网页中，其数量有多少。
创建一个ajax调用（在客户端和服务器上），这会给你一个预先加载的图像名称列表。
让您的服务器将一组图像名称嵌入到页面中，以便您知道要预加载的内容。

来源

2012-09-09 20:55:57 jfriend00

你能解释我怎么可以捕捉到错误？ –

@yukashimahuksay - 它使用''标签，那么它将成为图像对象上的'error'事件。而不是'load'事件，你会得到'error'事件。如果您通过Ajax调用请求数据，它将是404状态。 – jfriend00

我使用'img = new Image（）; img.src = url;' –

我一直在寻找改善我的网站之一的性能，并着眼于此。我的解决方案似乎工作，我还没有看到任何其他地方。

它使用jQuery和PHP

//预紧通过jQuery .load图像和两步法删除，一旦他们通过回调

<div id="preload"></div> 

$('#preload').load('preload.php', function() { 
$('#preload').remove(); 
});

// preload.php低于缓存 - 通过图像文件夹循环并将图像插入隐藏的div中

<div style="display:none"> 
<?php 
$dirf = 'images'; 
$dir = scandir($dirf); 
foreach ($dir as $file) { 
if (($file != '..') && ($file != '.')) { 
    echo "<img src='images/$file' />"; 
    } 
} 
?> 
</div>

这工作在Firefox，但随时批评或改善

来源

2013-08-28 21:53:50 Jeff

作品perfekt！ – Manuel

使用jQuery预加载目录中的所有图像

回答

相关问题