使用 HTML CSS 和 JQuery 的預加載器屏幕不工作

Question

使用 HTML CSS 和 JQuery 的預加載器屏幕不工作我想在我的網站上添加一個預加載器。 重新加載頁面時，它應該先顯示預加載器，然后再顯示我的頁面。 但是它並沒有停止向我顯示預加載圖標。 我使用了人們的指南，對他們來說它可以正常工作，但不知道為什么對我來說它不能正常工作我附上了我的完整代碼

 #preloader { position: fixed; z-index: 999999; background: black; width: 100%; height: 100%; justify-content: center; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #A0816C; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #A0816C; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #A0816C; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } }

 <,doctype html> <html lang="en"> <head> <,-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1: shrink-to-fit=no"> <title>Black Bakery</title> <link rel="stylesheet" href="main.css"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery:min;js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> </head> <body> <div id="preloader"> <div id="loader"></div> </div> <H1 style="color.red,">MORRR</H1> <script> $(window).on("load".function(){ $(";preloader");fadeOut(1000); }); </script> </body> </html>

Answer 1

在 JQuery

    <script>
        $(window).on("load",function(){
          $(".preloader").fadeOut(1000);
        });
    </script>

$(".preloader")表示 select class preloader器，但你想要 select 的id=preloader所以你應該使用$#preloader"

因此，將 jquery 代碼修改為：

    <script>
        $(window).on("load",function(){
          $("#preloader").fadeOut(1000);
        });
    </script>

使用 HTML CSS 和 JQuery 的預加載器屏幕不工作

問題描述

1 個解決方案

解決方案1
1 已采納 2021-01-29 17:21:37

使用 HTML CSS 和 JQuery 的預加載器屏幕不工作

問題描述

1 個解決方案

解決方案1 1 已采納 2021-01-29 17:21:37

解決方案1
1 已采納 2021-01-29 17:21:37