很想为我的网站使用页面加载器

如何解决很想为我的网站使用页面加载器

我正在尝试为我的网站使用页面加载器，我无法在我的代码中使用 javascript，如果您能帮助我使用我网页下方的 javascript 代码，这将很有帮助我喜欢这个 prepage装载机。它是一个手写页面加载器

pagelooader.js

document.addEventListener("DOMContentLoaded",function(event) {
    
    window.onload = function() {
        fadepreloading();
    };
    function fadepreloading(){
        document.getElementsByClassName("container-loader-pre")[0].style.visibility = "hidden";
        document.getElementsByClassName("container-loader-pre")[0].style.opacity = "0";
        document.getElementsByClassName("container-loader-pre")[0].style.transition = "0.5s";

        var fontSize = 72;
              
        if(window.screen.width < 700){ 
            fontSize = 32;
        }else if(window.screen.width < 1200){
            fontSize= 56;
        }
        var alt = (window.innerHeight/2)-fontSize;

        /****HAND WRITTING EFFECT******/
        var vara = new Vara(
            "#container-pageLoader","./json/Satisfy/SatisfySL.json",[
                {
                    text: "Your Name.",//Put your name instead of Shopia Ross
                    y: alt,fromCurrentPosition: { y: false },duration: 1000,id:"draw",autoAnimation:false
                }
            ],{
                strokeWidth: 0.5,color: "#fff",fontSize: fontSize,textAlign: "center"
            }
        );
        vara.ready(function(){
                setTimeout(function(){
                    vara.draw("draw");
                },500);
                vara.animationEnd(function(i,o){
                    setTimeout(function(){
                        $(".container-loader").fadeOut('slow');
                        $("body").css({"overflow":"auto"});//when the page is loaded,overflow auto 
                    },200);
                });
        });
    }
});

index.html 代码

<div class="loader container-pageLoader">
    <div id="loader">
    </div>
</div>