Javascript 关于库中js/jquery预加载程序的一些困惑

我是网络开发新手，所以如果这是一个愚蠢的问题，请原谅我。我对图像预加载程序感到困惑。我正在写一个画廊，里面有30-40幅左右的大图片。gally有一些拇指，如果点击其中一个，它会显示大拇指

目前，我的HTML如下所示：

<script type="text/javascript">
    var gallery_smallsize_urls = [
        "0_small.jpg", "1_small.jpg",
        "2_small.jpg", "3_small.jpg", 
        ...
        ];

    var gallery_fullsize_urls = [
        "0_full.jpg", "1_full.jpg",
        "2_full.jpg", "3_full.jpg",
        ...
        ];
</script>

<div id="gallery_thumbs">
    <ul>
        <li> <img id="gallery_thumb0" src="loading.gif" alt="0"> </li>
        <li> <img id="gallery_thumb1" src="loading.gif" alt="0"> </li>
        <li> <img id="gallery_thumb2" src="loading.gif" alt="0"> </li>
        <li> <img id="gallery_thumb3" src="loading.gif" alt="0"> </li>
        ...
    </ul>
</div>

var gallery\u smallsize\u URL=[
“0_small.jpg”、“1_small.jpg”，
“2_small.jpg”、“3_small.jpg”，
...
];
变量库\u完整大小\u URL=[
“0_full.jpg”、“1_full.jpg”，
“2_full.jpg”、“3_full.jpg”，
...
];





...

现在，我想到了两个特点：

加载队列。页面已加载。在文档准备就绪时，js开始拇指队列。这意味着：加载1°拇指，只有在完成后才开始加载2°。等等

预加载填充尺寸图像。当用户单击thumb时，必须等待更少的时间才能显示完整的图像（因为完整大小的图像已经缓存在内存中）

现在，我发现：

函数预加载（数组图像）{
$（arrayOfImages）.each（函数（）{
$('
但我认为这只是第2点的答案。这里发生了什么？图像是同时加载的？我不知道如何接近第1点。我认为最好的方法是使用

一些建议？
您可以使用图像预加载插件（jQuery）


这将允许在显示之前预加载缩略图（这更有效，因为浏览器无论如何都会这样做）

对于大型图像，您可以使用插件加载背景中的所有图像。例如：

var sampleImage= new Image();
sampleImage.src = imageURL;

$(sampleImage).imagesLoaded({
    done: function($images){
              // do something when image is loaded
    });
});

应该不需要预加载您计划在初始页面加载时显示的图像，也就是缩略图。您的浏览器可以很好地处理此问题。该插件似乎很棒，但很抱歉，我的js知识不太高。在我看来，它有一些递归功能，但..它做什么？它所做的一切都是“完成”事件。如示例中所示，在加载图像后，您可以执行任何所需的代码。除非您想要良好的淡入淡出效果或其他效果，否则无需使用它。您只需使用示例代码中的前2行即可。当然，您需要为每个图像执行该操作。我的评论是关于在胡德..我看了一下插件的代码，我在想它是如何工作的。。
var sampleImage= new Image();
sampleImage.src = imageURL;

$(sampleImage).imagesLoaded({
    done: function($images){
              // do something when image is loaded
    });
});