如何使用jQuery预加载图像

嗨，我有一个项目，其中一个页面有一个画廊。类似的东西：如何使用jQuery预加载图像

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

而且这也没有奏效。

我已经看了一下，有很多关于如何使一个函数，预加载您的图像等教程，但我还没有那么。我只想知道如何在现在一个接一个的基础上做，然后创建一个功能。谢谢。

来源

2017-05-05 Paul

[与jQuery预加载图片]的可能的复制（http://stackoverflow.com/questions/476679/preloading-images-with -jquery） – mxr7350

我不是在寻找一个功能来做到这一点。我只想知道如何用现在的一个图像来做到这一点，因为我正在挣扎。谢谢 – Paul

它们有很多功能可以做到这一点图像在页面打开时加载到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' 
]);

来源

2017-05-05 13:41:18

如何使用jQuery预加载图像

回答

相关问题