javascript - 画廊的图像预加载器一张一张？这有什么问题吗？

Question

我想制作一个 JavaScript (jQuery)、HTML 画廊，其中有大约 60 张图片。我希望它们一一加载。它们被命名为1.jpg、2.jpg、3.jpg...等。

所以我开始制作一个 <img id="loader" style="display:none;" src=""/> 这包含实际加载的图像，我用脚本为其提供 src，然后等待它加载，然后将相同的 src 提供给其真正的目的地:

<img class="active_pic" id="a1" src="img/load.gif"/>

完成后，我开始加载第二张图片。我该怎么做？

我尝试使用递归来实现它，这是一个调用自身的函数，但它不会等待图像加载。我用的是这个:

$("#loader").attr("src",pic);   
$("#loader").ready(function(){$("#a"+active).attr("src",pic);   

Answer 1

您可以使用 JS 代码加载图像

var img = new Image();

img.onload = function() {
    // do stuff after image is loaded
};

img.src = pic_url;

更新

JS 函数 stub 和使用示例

<script>
function load_image(img_url)
{
    // show overlay, spinner, whatever

    var img = new Image();
    img.onload = function() {
        // add <img> tag
        // hide overlay, spinner, whatever
    };
    img.src = img_url;
}
</script>

<a href="jaavscript:load_image('/images/test.jpg');">load image</a>