改善網站上的背景圖片加載

我的網站有一個背景圖片，當我第一次加載它時;我看到按鈕等和圖像加載大約兩秒鐘後，圖像原始大小爲1.1 MB和閱讀下面的帖子後，我將其降低到 KB，仍然加載圖像需要時間......改善網站上的背景圖片加載

Crystal，G. 5 Easy Ways to Help Reduce Your Website’s Page Loading Speed。 Hub Spot。 2015年8月3日。

還有其他方法可以改進它嗎？

我用不那麼像以下：

.intro { 
    display: table; 
    width: 100%; 
    height: auto; 
    padding: 100px 0; 
    text-align: center; 
    color: white; 
    background: url(../img/intro-bg-compr.jpg) no-repeat bottom center scroll; 
    /* ... */ 
}

來源

2016-12-19 John Jerrby

加載圖像沒有什麼可以做的。你可以添加一個高度，但如果感覺像是圖像的佔位符，並且它在加載時圍繞着內容進行隨機播放 – Sudheer

@Sudheer - 你可以舉個例子嗎？ –

因爲它是背景圖片，所以不需要高度。他的意思是，如果在圖像之後有一段文字，通過調整一個文字，它將留下圖像所需的空間，而不是讓文字在加載之前反覆上下。這裏不適用。你可以做的一件事是檢查緩存。設置它，使用戶只需要第一次下載圖像一次。 – monxas

你有救了你的JPEG隔行掃描？它可以幫助您瞭解下載時間。

https://en.wikipedia.org/wiki/Interlacing_(bitmaps)

我也通過https://tinypng.com/過成功優化圖像

或者考慮給用戶的反饋，該頁面仍通過創建Spinner加載： http://www.ajaxload.info/

來源

2016-12-19 13:44:00 AndFisher

謝謝，但你能給我一個實際的例子，我應該做什麼？ –

隔行掃描應該是您首選圖像編輯器的JPEG導出功能的一個選項 – AndFisher

有用的工具：http://imgonline.com.ua/eng/make-jpeg-progressive-without-compression。php –

function backGroundDiv() { document.GetElementById('intro').style.background="../img/intro-bg-compr.jpg" no-repeat bottom center scroll; 
} 

window.onload= backGroundDiv;

如果你在你的頁頭部分運行這段代碼並修復這個CSS;

.intro { 
    display: table; 
    width: 100%; 
    height: auto; 
    padding: 100px 0; 
    text-align: center; 
    color: white; 
}

它的工作原理。我希望這個對你有用。

來源

2016-12-19 13:51:33

除了添加JavaScript依賴項外，它還有什麼作用？ – AndFisher

關注這個

第1步：在Photoshop中打開圖像。 步驟2：單擊另存爲。 第3步：保存後您將獲得一個JPEG選項。 選擇漸進式選項，給掃描次數和點擊確定保存

這將提高你的site.Your背景圖像質量的背景圖像加載時間將掃描增加掃描。

來源

2016-12-19 14:07:36

改善網站上的背景圖片加載

回答

相關問題