javascript - 如何使用 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 中，但不可见。然后，当您想要显示它们时(单击时，在 slider 上，...)，没有加载时间!

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'
]);