Displaying main content after loading with loading GIF – Blancer.com Tutorials and projects

I’m trying to display a loading GIF while my web page is loading, and then hide the loading GIF and display the main content once the page has finished loading. I’ve tried using JavaScript to achieve this, but I’m encountering an issue where the main content doesn’t display after the loading GIF disappears. Here’s my code:

landingpage.js:

window.addEventListener("load", function () {
    var loading = document.getElementById("loading");
    loading.style.display = "none";

    var mainContent = document.querySelector(".l-main");
    mainContent.style.display = "block"; // This line doesn't seem to work
});

landingPage.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head content -->
</head>
<body>
    <div id="loading">
        <!-- Loading GIF content -->
    </div>
    <main class="l-main">
        <!-- Main content -->
    </main>
    <script src="landingpage.js"></script>
</body>
</html>

I expect the main content to be displayed after the loading GIF disappears, but it doesn’t seem to be working. Can someone please help me identify what I’m doing wrong or suggest a better approach to achieve this? Thank you!

Edit:

How i hidden the .l-main:

<style>
        /* Styles for the loading screen */
        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Hide the main content initially */
        .l-main {
            display: none;
        }
        .l-header{
            display: none;
        }
    </style>