如何使用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預加載圖像

回答

相關問題