2

我想将所有图像预加载到一个名为 的目录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);
4

2 回答 2

6

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

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

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

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

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

于 2012-09-09T20:55:57.000 回答
3

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

它是使用 jquery 和 php 的两步方法

  1. // 通过 jquery 预加载图像 .load 并在通过回调缓存后删除

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

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

  2. // 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-28T21:53:50.380 回答