頁面載入後如何載入大型 CSS 檔案？

優化 CSS 交付：了解 CSS 延遲加載技術

為了提高網站效能，開發人員經常優化 CSS 交付。 Google 開發者文件中提到的一項策略是將關鍵 CSS 內聯到

中。部分，同時將原始 CSS 檔案的載入延後到頁面載入之後。這種方法透過優先顯示基本樣式來優化渲染。

但是，這給我們留下了一個問題：如何在頁面載入後載入大型 CSS 檔案？

解決方案：延遲載入大型CSS 檔案

要延後載入大型CSS 文件，我們可以使用簡單的方法jQuery 程式碼片段：

    function loadStyleSheet(src) {
    if (document.createStyleSheet){
        document.createStyleSheet(src);
    }
    else {
        $("head").append($("<link rel='stylesheet' href='"+src+" />"));
    }
};

透過在$(document).ready() 或window.onload 函數中呼叫此函數，我們可以在頁面載入完成後動態載入CSS 檔案。

方法驗證

要驗證此方法是否有效，請嘗試在瀏覽器中停用 JavaScript，然後重新載入頁面。如果應用了樣式表後頁面仍然正確加載，則表示 CSS 加載已成功延遲。

替代方法

還有延遲 CSS 載入的替代方法，例如與使用

以上是頁面載入後如何載入大型 CSS 檔案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！