延遲加載資源

我的問題是，有沒有辦法先讓網站顯示，然後使用JavaScript加載這些沉重的資源，同時保留功能以防JavaScript不可用？延遲加載資源

我的理由：我想優化我的Joomla模板。可能會有一些非常繁重的資源，如超大背景圖像。我的測試用例使用4000px * 3000px 3.01MB的.png圖片。儘管SO向我展示了this解決方案，但我無法使用它，因爲即使沒有JavaScript，我也打算使用背景圖片。另外我會自己想出...

如果有人可以給我堅實的證據，證明幾乎所有的互聯網用戶都使用JavaScript ......我說的是99.999％，這會讓事情變得容易很多。

無論如何，這會對顯示網站的總時間產生一些影響。還有另外一個資源，我希望使用這種技術，這是一個由Joomla插件運行的PHP腳本，需要1秒鐘才能響應，這也影響了總時間。

最終我想控制何時加載特定的資源。

我自己嘗試：我想取出background-image風格相關的元素，但我仍然時間表沒有改變。由於瀏覽器的工作量較少，因此渲染速度更快，但照片仍在加載。

2013-10-06 Kiruse

如果你添加一個交換一個類上使用JS喜歡Modernizr的<html>標籤做（它交換.no-js爲.js，那麼你可以有選擇地添加圖片沒有支持JS的瀏覽器。

然後你就可以高高興興地創建一個新的Image對象，加載它並在其準備就緒時更改元素樣式

2013-10-06 21:27:29 Wil

我已經在使用這種機制來增強我網站的設計。但我沒有想到將它應用於''標籤呢......我嘗試了它，並且它工作正常，我完全可以使用它。謝謝。 :) – Kiruse

我想你應該重新考慮你的情況爲什麼你要在網站上加載如此沉重的圖像呢？移動用戶使用昂貴的數據計劃？你確定他們會花費3mb的4k圖像嗎？

也許不是。

相反，您是否嘗試優化您的網絡圖像？像Photoshop這樣的軟件給出了這樣的選擇。自適應圖像作爲響應式設計的一部分呢？（粉碎雜誌有一篇很好的文章，關於這個不久前http://coding.smashingmagazine.com/2013/06/02/clown-car-technique-solving-for-adaptive-images-in-responsive-web-design/）

如果你堅持，但是有幾個JavaScript庫可以幫助你。第一個出現在我腦海裏的是背影（http://srobbin.com/jquery-plugins/backstretch/）。它會在你的背景中顯示一個默認的顏色，直到你的圖像加載，然後交換它們。

2013-10-06 21:42:15

這只是一個測試案例。當然，圖像將會被優化，並且絕對會被縮小。對於移動用戶，我甚至在響應式設計方面有着不同的佈局。如果我無法找到集成在默認網站中的複雜解決方案，我會特別爲移動設備使用子域。無論如何，感謝您的關注和文章，我會仔細研究一下。 – Kiruse

回答