如何制作页面加载器/动画/过渡

Question

好吧所以我正在尝试为我的网站加载，以便所有内容都有时间加载，但我没有找到任何有用的东西。

你可以在这方面发起我吗？你有什么好的教程/例子吗？我找不到有用的东西。 感谢。

Answer 1

我通过为您的页面提供不同的状态（例如加载，加载和错误）来实现它。并传入一个status参数，然后使用css向其添加display：none类。 （隐藏类是display：none）

＆＃13;

＆＃13;

function setStatus(status) {
        document.getElementById("loading").classList.add("hide");
        document.getElementById("contents").classList.add("hide");
        if (status == "loaded") {
                document.getElementById("contents").classList.remove("hide");
        }
        if (status == "loading") {
                document.getElementById("loading").classList.remove("hide");
        }
        if (status == "error") {
                document.getElementById("error").classList.remove("hide");
                document.getElementById("consultant-wrapper").classList.remove("hide");
        }
        if (status == "info") {
                document.getElementById("not-enough-info").classList.remove("hide");
                document.getElementById("consultant-wrapper").classList.remove("hide");
        }

}

＆＃13;

＆＃13;

＆＃13;