如何正確預載圖像，js和css文件？

我從頭開始創建一個網站，90年代後期我真的意識到這一點，但從那時起，網絡已經發生了很大變化！我更像是一位設計師，所以當我開始把這個網站放在一起時，我基本上做了一個php系統，讓網站更「動態」。如何正確預載圖像，js和css文件？

當你第一次訪問該網站時，你會被呈現給登錄屏幕，如果你還沒有登錄（餅乾）。如果您未登錄，則會引入一個名爲access.php的頁面。我以爲我會預載最重的圖像在這一點上。因此，當用戶完成登錄時，圖像已被緩存。這是按我想要的方式工作的。但我仍然注意到，最大的形象仍然不是立即呈現。所以這似乎有點毫無意義。

所有這一切使我重新思考網站的結構以及如何加載腳本和css文件。在Firefox中使用FireBug和YSlow我看到了一些像expire頭一樣的指針並減小了每個腳本的大小。但這真的是罪魁禍首嗎？

例如，在主index.php中，這會非常愚蠢嗎？整個網站基本上是這樣構成的

<?php 
require("dbconnect.php"); 
?> 

<?php 
include ("head.php"); 
?>

而下面這個基本上只是網站的正文和內容。但是，Head.php由doctype，頭部，兩個css樣式表，jQuery庫，jQuery驗證引擎，Cufon和Cufon字體文件以及小型Cufon.Replace代碼片段鏈接組成。

身體的其餘部分帶有index.php文件，但在這個底部還包含一個名爲「footer.php」的文件，該文件基本上由加載一對jsLoader腳本和一個滑動面板組成然後是一個js函數。所有這些使得最終頁面的源代碼看起來像一個典型的完整網頁，但我想知道你們中的任何一個人是否可以立即看到「這真的很愚蠢」，「不這樣做，而是這樣做」等等。 :)包括一個不好的路要走嗎？

這個網站也是很漂亮的圖像密集型，我可以做更多的優化。但我不認爲這是它的主要罪魁禍首。 YSlow的給我的是什麼佔用了大部分空間的報告：

doc(1) - 5.8K 
js(5) - 198.7K 
css(2) - 5.6K 
cssimage(8) - 634.7K 
image(6) - 110.8K

我知道它看起來像它的cssimage（8），重量最大，但我已經預裝這些圖片來自之前，它不真的會影響渲染。

來源

2010-04-07 Kenny Bones

大介紹！ hhahah – dscher 2010-04-07 14:50:25

要加快一點，你可以在同一圖像精靈集合所有的圖片，讓你只有1請求下載的所有圖像。但是這需要你微調你的css，讓它只顯示圖像的一小部分。爲了有一個更好的解釋，請上網：http://css-tricks.com/css-sprites/

另一個答案可能似乎有點愚蠢，但我喜歡把這個當我做一個網站：只要保持它的簡單。我的意思是說，所有的JS都會增加真正的價值，所有這些圖像都很好，你可以顯示更少，做出更輕的設計？我不是批評你的工作，只是建議你...

來源

2010-04-07 13:26:06

謝謝你的建議:)我喜歡這個！無論如何，這個網站並不是真正的典型網站。它更像是一個應用程序。實際上，它大部分都是圍繞渲染設計的。所以它不會比圖像重量要輕。但我可以將許多圖像合併爲精靈。但是我的很多圖片都是透明的，或者是半透明的。我需要將所有透明圖像收集到一個PNG中嗎？和gif（較少顏色）和jpeg一樣嗎？ – 2010-04-07 15:57:51

好吧，實際上我無法幫助你更精確地使用Css Sprites。我從來沒有用過它們，只是多瞭解它們而已。但是，把所有透明圖片和gif一起放在一起聽起來很合邏輯。那麼如果你使用JPG，它應該可能是照片。在這種情況下，您應該在頁面上只顯示一張照片，因此爲每個頁面生成一個不同的精靈...非常無聊。只要儘可能做得更好，請記住，對於相同的重量，最好少一些HTPP請求。 – 2010-04-09 18:52:33

我用外網項目如下方法：

使用jQuery和文件名的數組，我在所有的圖像，.js文件和.css文件阿賈克斯，使它們在高速緩存中預裝。當我遍歷數組時，我更新了屏幕上的進度條，表明該網站正在加載 - 非常類似於flash加載器。

它運作良好。

來源

2010-04-07 12:41:05

您能詳細說明一下「我在所有圖像，.js和.css文件中的ajax」嗎？你是怎樣做的？是我可以用來代替嗎？預先能夠實際預加載整個站點（index.php），而用戶輸入他的用戶名和密碼會很棒！ – 2010-04-07 16:03:09

查看jQuery庫中的$ .get和$ .ajax。循環訪問一組文件名並調用其中一種方法是相當簡單的。 – 2010-04-07 17:09:56

我會做的是默認顯示純CSS和HTML的加載頁面，然後等待jQuery加載和預加載圖像ImageLoader。一旦你完成重定向到正常的網站，因爲圖像已經在緩存中，它們將不會再被加載。

你可以做的另一個優化是縮小所有JS文件併合併除jquery.js以外的所有文件。首先將jquery.js放入HTML中，以便首先加載。也把你的SCRIPT標籤放在HTML的底部。

來源

2010-04-07 13:22:53

所有腳本標籤？因爲我使用Cufon，並沒有把它擰緊？ – 2010-04-07 15:54:23

不，它不會因爲你的腳本加載後Cufon會立即啓動，我想你已經在$（document）.ready（）開始。 – 2010-04-07 16:05:05

這聽起來像你有很多釘固定預加載，如果你已經加載一次，到期標題設置正確，你已經預裝了它，不管它是什麼樣的內容。

文件組合可以是關鍵，快速的網站，每個額外的文件會增加加載時間，在網絡和服務器的最壞的情況下落後，你可以添加到一個第二個加爲每個單獨的文件。更常見的情況是每個文件大約需要100 - 200毫秒。

如果不是已經過壓縮，再壓縮腳本，並把它們放在同一個文件，只記得保持秩序。我不知道爲什麼Ivo Sabev不會包含jQuery。

與CSS文件同樣的事情。

你有多少關於測試圖像壓縮做了什麼？通過嘗試不同的壓縮設置並比較大小和質量，確實會有所收穫。對於PNG圖像，使用PNGOUT的IrfanView通常可以使文件比其他程序小25％，除此之外，通過將圖像縮小爲8位顏色可以獲得非常大的縮小增益，並且只需很多圖形元素即可沒有區別。就在這裏堆棧溢出有很好的壓縮和堆疊的圖像編輯器控制按鈕一個很好的例子：http://sstatic.net/so/Img/wmd-buttons.png

來源

2010-04-07 14:30:32 aaaaaaaaaaaa

如何正確預載圖像，js和css文件？

回答

相關問題