如何使用jQuery预加载图像

Question

嗨，我有一个项目，其中一个页面有一个图库。 像这样：

 <div id="gallery" class="sections">
        <img src="Images/Image1.jpg" class="thumbnails">
        <img src="Images/Image2.jpg" class="thumbnails">
        <img src="Images/Image3.jpg" class="thumbnails">
        etc...
 </div>

我想预加载这些图像，以便在您访问图库页面时它们已经被加载。 我知道您可以使用javascript做到这一点。 类似于以下内容：

var myImage = new Image();
myImage1.src = "Images/Image1.jpg";
etc...

我不确定的是下一步。 我是否要从html中删除src并添加一个ID，如下所示：

 <div id="gallery" class="sections">
        <img id="image1" class="thumbnails">
        <img id="image2" class="thumbnails">
        <img id="image3" class="thumbnails">
        etc...
 </div>

然后做这样的事情：

$('#image1').append(myImage1);

这没有用...我也尝试过：

$('#image1').attr('src','Images/Image1.jpg');

而且这也不起作用。

我环顾四周，有很多关于如何制作一个可以预加载图像等功能的教程……但是我还没有。 我只是想知道现在如何一个接一个地做，然后创建一个函数。 谢谢。

Answer 1

它们有很多功能，可以在打开页面时将图像加载到DOM中，但不显示图像。 然后，当您想要显示它们时（单击时，在滑块上，...），没有加载时间！

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

//在所有图像路径中使用函数

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);