Wie können Sie eine große CSS-Datei laden, nachdem die Seite geladen wurde?-CSS-Tutorial-php.cn

How Can You Load a Large CSS File After the Page Has Loaded?

CSS-Bereitstellung optimieren: Die Technik des verzögerten CSS-Ladens verstehen

Um die Website-Leistung zu verbessern, optimieren Entwickler häufig die CSS-Bereitstellung. Eine in der Google Developers-Dokumentation erwähnte Strategie besteht darin, kritisches CSS in den Abschnitt, während das Laden der ursprünglichen CSS-Datei verschoben wird, bis die Seite geladen wurde. Dieser Ansatz optimiert das Rendering, indem zunächst die Anzeige wesentlicher Stile priorisiert wird.

Dadurch stellt sich jedoch die Frage: Wie können wir eine große CSS-Datei laden, nachdem die Seite geladen wurde?

Lösung: Das Laden großer CSS-Dateien verzögern

Um das Laden einer großen CSS-Datei zu verzögern, können wir ein einfaches jQuery-Code-Snippet verwenden:

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

Nach dem Login kopieren

Indem Sie dies aufrufen Mit der Funktion $(document).ready() oder window.onload können wir die CSS-Datei dynamisch laden, nachdem die Seite vollständig geladen wurde.

Methodenüberprüfung

Um zu überprüfen, ob diese Methode funktioniert, versuchen Sie, JavaScript in Ihrem Browser zu deaktivieren und dann die Seite neu zu laden. Wenn die Seite mit den angewendeten Stylesheets immer noch korrekt geladen wird, zeigt dies die erfolgreiche Verzögerung des CSS-Ladens an.

Alternative Methoden

Es gibt alternative Methoden zum Verzögern des CSS-Ladens, z wie die Verwendung von