如何使用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');
而且这也没有奏效。
我已经看了一下,有很多关于如何使一个函数,预加载您的图像等教程,但我还没有那么。我只想知道如何在现在一个接一个的基础上做,然后创建一个功能。谢谢。
答
它们有很多功能可以做到这一点 图像在页面打开时加载到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'
]);
[与jQuery预加载图片]的可能的复制(http://*.com/questions/476679/preloading-images-with -jquery) – mxr7350
我不是在寻找一个功能来做到这一点。我只想知道如何用现在的一个图像来做到这一点,因为我正在挣扎。谢谢 – Paul