Created
September 12, 2021 21:08
-
-
Save gr1zix/24e06e9d57c76a4bee6e2b70c5ebb21b to your computer and use it in GitHub Desktop.
Async custom or external scripts & styles loading which need to be used after website interact (Best way to load big files like lottie scenes on Base64 stored in json which have size ~10M)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <script type="text/javascript"> | |
| // Async custom or external scrips & styles loading | |
| (function() { | |
| var lazyLoaded = false; | |
| window.addEventListener("scroll", function () { | |
| ((document.documentElement.scrollTop || document.body.scrollTop) > 0 && lazyLoaded !== true) && | |
| (!(function () { | |
| var genericIcons = document.createElement('link'); | |
| genericIcons.href = 'https://myapp.com/content/icons-pack-from-footer.css'; | |
| genericIcons.rel = 'stylesheet'; | |
| genericIcons.type = 'text/css'; | |
| genericIcons.media = 'all'; | |
| var linkItem = document.getElementsByTagName('link')[0]; | |
| linkItem.parentNode.insertBefore(genericIcons, linkItem); | |
| })(), (lazyLoaded = true)); | |
| }, true); | |
| })(); | |
| </script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment