我无法增加页面加载器动画时间

I'm unable to increase Page loader animation time

我正在尝试向我的网站添加一个加载器,当我尝试 运行 我的代码时,我注意到加载器动画持续时间非常短,所以我添加了 JQuery 代码(setTimeout ) 并且为了测试,我将它写入 运行 10 秒。但它不起作用。如果有人可以帮助我。

Github Link 演示:https://utkarshgoel10.github.io/loader/

我的代码:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style type="text/css">
        #loading{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #fff url('Skateboarding.gif') no-repeat center center ;   
        z-index: 99999;
    }
    </style>
        <body onload="myFunction()">
        <div id="loading"></div>

    <h1>HELLO WORLD</h1>
    <h1>HELLO WORLD</h1>
    <h1>HELLO WORLD</h1>
    <h1>HELLO WORLD</h1>
    <h1>HELLO WORLD</h1>
        <script type="text/javascript">

            function myFunction(){
                preloader.style.display = 'none';
            };

    </script>
        
    <script>
            jQuery(document).ready(function () {
        $(window).load(function () {
            setTimeout(function(){
                $('#loading').fadeOut('slow', function () {
                });
            },4000); 
        });  
    </script>
    </body>
    </html>

回顾一下您的上一个脚本。它缺少正确的标点符号。

<script>
jQuery(document).ready(function () {
    $(window).load(function () {
        setTimeout(function(){
            $('#loading').fadeOut('slow', function () {
            });
        },4000); 
    });
}); //THIS WAS MISSING
</script>