在下載「圖像大名單」之前加載頁面的所有CSS＆js

我有一個網頁，顯示一個頁面中大約20個自動播放的幻燈片（每個包含4-5個圖像）的列表。現在的問題是，這是需要很長時間來加載網站（因爲這麼多的圖像，它會，因爲這麼多的圖像），但我想優先加載所有必要的CSS和JS文件，以便其他組件在圖像開始下載之前，該頁面已正確呈現。在下載「圖像大名單」之前加載頁面的所有CSS＆js

那麼...有沒有一種方法來設置加載所需資源的優先順序？

來源

2011-09-29 Rajat Gupta

嗯，你可以以編程方式加載圖像在頁面加載... –

你的意思是這樣使用JS是什麼？你能指出如何實現這種事情嗎？ –

是的，一個基本的模板：'img = document.createElement（'img'）; img.src ='image1.jpg'; dest.appendChild（img）;' –

有沒有一種方法來設置所請求的資源
加載的優先順序

是 - 把它們按順序在HTML文件！

我想先優先加載所有必需的css和js文件，以便頁面上的其他組件在圖像開始下載前正確呈現。

這是一個不同的問題。

只有知道大多數元素的尺寸後，才能正確呈現您的頁面組件。因此，如果您的頁面佈局中有其他圖像，則需要先加載這些圖像，或者在標記中指定其寬度和高度屬性。

由於如果您使用純HTML加載它們，您的幻燈片圖像將與您的佈局的其餘部分混合在一起，這聽起來像您別無選擇，只能將所有幻燈片放映圖像從Javascript，每個其他評論和答案。然後

來源

2011-09-29 20:19:34 Alnitak

他們已經按順序，但我希望，直到首選資源沒有完成下載，圖像不應該被下載..這是可能的嗎？ –

更好的方式使用DOM來創建元素有你的div甚至IMG標籤的src是空的，然後使用在有載功能，您想要的圖像加載它們的innerHTML：

function images(){ 
    var place_to_put_image = document.getElementById("image_div"); 
    place_to_put_image.innerHTML = "<img src=\"your_image_here\"></img>"; 
} 

<body onload="images()> 
    <div id="image_div></div> 
</body>

你可以把你的圖片在一個數組中，並將div的任何內容分配給數組，以及如果你希望它們都在同一個地方，或者你可以把onload放在div中或者你想要加載圖像的地方。

來源

2011-09-29 20:43:03 Ryan

有幾種方法可以去做，但他們都涉及到實際上不把圖像放入HTML - 至少不正確。我喜歡這樣做的一種方式是將圖像src的URL添加到另一個屬性，如alt（不適用於輔助功能）或rel。此外，給所有的圖像一個類將被用來鉤入它與JS。

<img alt="images/foo.jpg" class="loadlater" />

然後在你的JS，讓所有元素與class="loadlater"並設置源到ALT值。

img.src = img.alt;

你沒有提到jQuery。如果你使用jQuery，交換的屬性命令是這樣的：

$('.loadlater').each(function() { this.src=this.alt; });

然後，無論何時何地，你的話，這個圖像將被載入。你會想在你的css和js完成加載後調用它 - 可能是document.load函數。同樣，如果你使用jQuery，它應該是這樣的：

$(function() 
{ 
    $('.loadlater').each(function() { this.src=this.alt; }); 
});

來源

2011-09-29 20:43:34 Jeff

在下載「圖像大名單」之前加載頁面的所有CSS＆js

回答

相關問題