如何提高Web應用程序的圖像加載性能？

我有一個Web應用程序在本地主機上運行。要求是加載多個長方形jpg圖像（96張圖像，每張大小平均7k）並在主頁上顯示。圖像以8x12行/列的網格顯示。我通過在javascript中設置'img'的'src'屬性來加載圖片。分配給'src'屬性的url對於所有圖像都是相同的，但圖像ID不同。圖像正在加載，但主要問題是它們加載速度並不快，它們是一些序列中的加載意味着1,2,3,4 ...等等，但某些圖像不會按順序加載。我想改善此頁面的性能。我已經嘗試了搞清楚的定時的不同點處，如：如何提高Web應用程序的圖像加載性能？

當呼叫始發客戶形式（圖像src屬性被設置）
當服務器正在接收呼叫。（服務器上服務於個別圖像的頁面）
服務器即將返回圖像時。
當客戶端接收到側圖像/顯示（稱爲以JavaScript圖像加載事件）

原來看所收集的數據主時間1和2之間失去上面是後發起客戶端呼叫，服務器正在接收特定圖像的呼叫。

我也嘗試過在machine.config中設置maxWorkerThreads，minWorkerThreads，requestQueueLimit和maxconnection等參數，但沒有明顯的改進。

有人可以幫助我在這種情況下，因爲我在這裏卡住了很多天，現在我真的很短暫。迫切需要提高這些圖像加載的性能。

在此先感謝。

來源

2012-07-18 zeeshan malik

如果網格從不需要全尺寸的圖像，你有沒有考慮把許多圖像放在一個大的圖像文件中並使用CSS sprite方法？ – 2012-07-18 13:58:25

嗨，喬納斯，是的，這是一個想法，但記住。但問題是這些圖像是從另一個應用程序遠程接收的運行時間圖像。如果我需要實現CSS sprite之類的東西，那麼我需要在客戶端每次訪問該頁面後立即將所有這些圖像合併到一個大圖像中。你認爲有什麼辦法可以做到嗎？ – 2012-07-18 14:16:10

不，如果圖像不可預知，您可能會丟失。您是否評估過提供映像的遠程應用程序是否可能成爲瓶頸？在這種情況下，緩存可能是一種方法（請參閱電子標籤和最後修改）。 – 2012-07-18 14:48:15

既然你強調時間不夠，我會建議你嘗試一個jQuery插件，按需加載圖像。在其中加載圖片的圖庫，用戶是否在其中滾動？或者它是一個大領域？如果是用戶可以滾動的圖庫，我強烈建議您查看lazyload。這個插件的功能是隻在需要時才提取圖片。只要它不在屏幕上，它就不會被加載。舉個簡單的例子，看看this demo。

我希望這可以幫助你。

來源

2012-07-18 13:21:43

實際上，沒有使用延遲加載或按需圖像，因爲一旦頁面URL被擊中，它需要同時加載所有圖像，並且沒有滾動，因爲圖像足夠小以適合頁面。你可以說這與在沒有任何滾動的情況下在谷歌圖像上看到圖像相似。我不確定谷歌圖像如何加載太快。需要幫忙？ – 2012-07-18 13:57:04

在這種情況下，製作一個（甚至更小）的縮略圖可以幫助你。雖然由於你的初始圖像的大小已經只有7KB，這並不會縮短加載時間。 – 2012-07-18 14:05:35

任何其他的事情，我可以做的更快加載圖像在網頁上？ – 2012-07-18 14:09:46

如何提高Web應用程序的圖像加載性能？

回答

相關問題