由於背景圖片，頁面太慢

我在一個網站上使用CSS3全屏庫（無JavaScript）。畫廊基本上是一個無序列表，其中每個列表項目是一個全屏幕背景。由於背景圖片，頁面太慢

它通過爲每個列表項設置CSS文件中的背景圖像來工作。目前，該圖庫可以保存48張圖像，並且該頁面需要加載太多。

第一視圖是大約35秒的某處。看起來瀏覽器首先加載每個DOM元素，並且花費太多時間。

有沒有辦法在頁面加載時不加載某些列表項元素，但只有在頁面加載後才能使它們可見？

該網站可以在http://www.steveezell.com

來源

2012-10-02 suludi

你如何設法處理這種緩慢？ –

通過進行骯髒的黑客攻擊，在頁面啓動時僅加載少量圖像，以便瀏覽器可以相當快地渲染頁面。然後我添加了添加所有其他背景圖片的正文的點擊事件。 – suludi

如果您聲明在HTML源的圖像中可以看出，這將是網頁加載過程中負載始終。我認爲最好的選擇是從JavaScript改變圖像源。

PS：漂亮的頁面

來源

2012-10-02 21:52:52 adripanico

您可以簡單地使用AJAX調用後的頁面完全加載：

// Load the script when the page has fully loaded: 

$(window).load(function() { 
$.getScript(‘your_3rd_party-script.js’); 
});

RetrieveImages.js：

// Load here all the images (You might consider showing the first image 
// or images with the regular page loading to show a first indication to the user 
// and avoid waiting for the page to finish load before showing something). 

document.getElementById("myImg").src = "http://www.example.com/image?id=1";

你或許應該使用jQuery來分組按類$(".className")加載所有圖像。

您使用的服務器端代碼是什麼？我會reccomand啓用gzip壓縮，這應該大大減少圖像大小。

來源

2012-10-02 22:05:53

由於背景圖片，頁面太慢

回答

相關問題