0

我是 web-dev 的新手，所以如果这是一个愚蠢的问题，请向我道歉。我对图像预加载器感到困惑。我正在写一个包含或多或少 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>

现在，我有两个特点：

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

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

现在，我找到了这个投票答案：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

但我认为这只是第 2 点的答案。这里会发生什么？图片是同时加载的吗？我不知道如何处理第 1 点。我认为最好的方法是使用Deferred 对象....

一些忠告？

4

1 回答 1

1

您可以使用图像预加载器插件（jQuery）。

https://github.com/desandro/imagesloaded

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

至于大图像，您可以使用该插件在后台加载所有图像。例如：

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

$(sampleImage).imagesLoaded({
    done: function($images){
              // do something when image is loaded
    });
});
于 2012-11-30T18:27:13.717 回答