Lazy Loading CSS and JS libraries

lazyloading.html

  <!-- Preloading Files -->
  <script>
    function lazyLoadLibraries() {
        const csslibraries = [
            'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/monokai-sublime.min.css',
        ]
        const jslibraries = [
            'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js',
        ]

        const cssLinkTags = []
        for (const library of csslibraries) {
            let link = document.createElement('link'); link.href = library; link.rel = 'preload'; link.crossorigin = ''; link.as = 'style';
            document.head.appendChild(link);
            cssLinkTags.push(link);
        }

        for (const library of jslibraries) {
            let link = document.createElement('link'); link.href = library; link.rel = 'preload'; link.crossorigin = ''; link.as = 'script';
            document.head.appendChild(link);
        }

        setTimeout(() => {
            for (const cssLinkTag of cssLinkTags) { cssLinkTag.rel = 'stylesheet';}
            for (const library of jslibraries) {
                let preloadedScript = document.createElement('script');
                preloadedScript.src = library;
                document.head.prepend(preloadedScript);
            }
        }, 0);
    }
    window.addEventListener('load', lazyLoadLibraries);
  </script>