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

时间:2021-06-02 14:30:05

标签: javascript html jquery css loader

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

演示的 Github 链接: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>

1 个答案:

答案 0 :(得分:1)

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

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