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

Posted 2023-05-07

【中文标题】使用 jQuery 预加载目录中的所有图像

【英文标题】：Preload all images in a directory using jQuery

【发布时间】：2012-09-02 19:06:35

【问题描述】：

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

我知道如何通过将特定图像的名称放入数组并进行预加载工作来预加载特定图像，但我想知道如何告诉脚本动态搜索该目录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);

【问题讨论】：

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

【参考方案1】：

在 http 中没有一般可用的工具来进行目录列表。我能想到的选项是：

以可预测的方式命名您的图像，例如（img001、img002 等...），然后您可以加载图像直到出现错误。

以可预测的方式命名您的图像，例如（img001、img002 等...），然后将一个数值限制值编码到您的网页中，以确定有多少。

创建一个 ajax 调用（在客户端和服务器上），它将为您提供要预加载的图像名称列表。

让您的服务器将一组图像名称嵌入到页面中，以便您知道要预加载什么。

【讨论】：

@yukashimahuksay - 如果您使用的是<img> 标签，那么它将是图像对象上的error 事件。您将获得error 事件，而不是load 事件。如果您通过 Ajax 调用请求数据，则为 404 状态。

我用img = new Image(); img.src=url;

@yukashimahuksay - 然后，您可以使用img.onerror(fn) 或img.addEventListener('error', fn)。有关这方面的更多信息，您应该编写自己的问题，而不是继续在此处发表评论。

【参考方案2】：

我正在考虑提高我的一个网站的性能并对此进行了研究。我的解决方案似乎有效，我还没有在其他任何地方看到它。

这是一个使用 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 中有效，但请随时批评或改进