This script dynamically loads additional styles and scripts upon the user's first interaction with the page (mouseover, click, or scroll) to optimize initial load time.
The load.js script improves the performance of your web page by deferring the loading of non-critical CSS and JavaScript files until the user interacts with the page. This ensures that the initial load time is faster, providing a better user experience.
-
Include the script in your HTML: Add the
load.jsfile to your project and include it in the<head>section of your HTML with thedeferattribute.<head> ... <meta name="style" content="/static/css/main.css"> <meta name="style" content="/static/css/first.css"> <meta name="style" content="/static/css/another.css"> <meta name="script" content="/static/js/main.js"> <meta name="script" content="/static/js/first.js"> <meta name="script" content="/static/js/another.js"> <script defer src="/path-to-js/load.js"></script> <!-- Replace 'path-to-js' with the actual path to your JS folder --> </head>
-
Add meta tags for styles and scripts: Use
<meta>tags to specify the styles and scripts that should be loaded lazily. Each file should have its own<meta>tag.<meta name="style" content="/static/css/main.css"> <meta name="style" content="/static/css/first.css"> <meta name="style" content="/static/css/another.css"> <meta name="script" content="/static/js/main.js"> <meta name="script" content="/static/js/first.js"> <meta name="script" content="/static/js/another.js">
-
Script file (
load.js): Add theload.jsscript to your project:
Here is an example of a simple HTML document using the lazy load script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Load Example</title>
<meta name="style" content="/static/css/main.css">
<meta name="style" content="/static/css/first.css">
<meta name="style" content="/static/css/another.css">
<meta name="script" content="/static/js/main.js">
<meta name="script" content="/static/js/first.js">
<meta name="script" content="/static/js/another.js">
<script defer src="/path-to-js/load.js"></script> <!-- Replace 'path-to-js' with the actual path to your JS folder -->
</head>
<body>
<h1>Lazy Load Example</h1>
</body>
</html>