用jquery預加載特定類的圖像

例如 - 預裝僅適用於圖像帶班「.grid」

我見過很多的基於陣列的預緊力的例子，但我的形象的名稱是動態生成的（我使用的Drupal 6），和除非必須，否則我不想在全球預加載圖像。

任何想法？感謝斯蒂芬妮

2011-09-26 StephanieF

如果你正在試圖解決的問題是加載在你的頁面，有grid類更快的圖像，那麼有沒有辦法做到這一點。要在頁面中找到具有grid類的圖像，您必須等待DOM加載，然後搜索DOM以查找這些圖像。在這一點上，瀏覽器已經在加載它們了。在這一點上，您無法在Javascript中執行任何操作，這會使圖片加載速度變得更快。瀏覽器已經加載它們。

我知道你可以做的唯一事情就是製作一個你想加載的URL數組，你可以在JavaScript的第一部分（head標籤中的腳本）預加載這些數據，這個「可能「讓圖片加載速度更快一點。但是，爲了做到這一點，你必須手動列出你想要應用它的圖像。您不能等待頁面加載並在頁面中查找它們，因爲到那時，它們已經儘可能快地加載了。如果你控制服務器端代碼，你可以生成服務器端的圖像列表並將該數組放入JS中。如果你這樣做，它會是這個樣子：

<head> 
<script type="text/javascript"> 
var preloadURLs = [ 
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg", 
    "http://photos.smugmug.com/photos/344290837_ypsKL-Ti.jpg" 
]; 

var preloadImgs = [], img; 
for (var i = 0; i < preloadURLs.length; i++) { 
    img = new Image(); 
    img.src = preloadURLs[i]; 
    preloadImgs.push(img); 
} 

</script> 
</head>

在大多數瀏覽器中，這應有助於在一定程度上對這些圖像的加載給予優先考慮，因爲他們的請求將首先推出的頁面開始加載之前。

來源

2011-09-26 19:46:23 jfriend00

謝謝你的解釋，我還沒有建立圖像在jquery生效之前必須加載的連接。感謝您的幫助。 – StephanieF

var imgs = new Array(); 
$('img.grid').each(function(idx){ 
var i = new Image(); 
i.src = $(this).attr('src'); 
imgs.push(i); 
});

來源

2011-09-26 19:29:52 usoban

這不會幫助。如果圖像已經在可以通過'$（'img.grid'）'找到的頁面中，那麼它們已經被瀏覽器加載了，並且這個預加載代碼不會改進任何東西。 – jfriend00

所以，我猜這個選項會使用一個ajax請求，將圖像拖到頁面上，然後將它們隱藏到一邊或其他東西？ –

用jquery預加載特定類的圖像

回答

相關問題