一切加载后，jQuery UI加载

时间：2018-07-03 13:40:13

标签： jquery html

一段时间以来，我一直在关注有关jQuery UI的youtuber教程，但实际上，每次刷新页面时，首先加载所有html，然后填充CSS，因此其次，您可以看到没有UI的HTML和CSS。无论如何，我可以防止这种情况发生，或者这是正常现象吗？

以下是HTML： 

    <!DOCTYPE html>

<html>

<head>
    <link type="text/css" rel="stylesheet" href="style.css">
    <link type="text/css" rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
    <link type="text/css" rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.structure.css">
    <link type="text/css" rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.theme.css">

</head>

<body>

  <div id="container">

        <div class="header">

        </div>


        <div id="nav">


        </div>


        <div class="sidebar">

        <ul id="verticalMenu">
          <li><a href="">Rome</a>
            <ul>
              <li><a href="">Early</a></li>
              <li><a href="">Middle</a></li>
              <li><a href="">Late</a></li>
            </ul>
           </li>
           <li>-</li>
           <li><a href="">Ancient Egypt</a>
            <ul>
              <li><a href="">Early</a></li>
              <li><a href="">Middle</a></li>
              <li><a href="">Late</a></li>
            </ul>
           </li>
           <li><a href="">Ancient Greece</a>
            <ul>
              <li><a href="">Early</a></li>
              <li><a href="">Middle</a></li>
              <li><a href="">Late</a></li>
            </ul>
           </li>
            </ul>
        </div>


              <div class="main">
                <div id="box">
                  <p>Thank you for visiting our site, we're hoping to see you again soon!</p>
                  <img src="ice.png">
              </div>


          </div>

          <script type="text/javascript" src="jquery-3.3.1.js"></script>
          <script type="text/javascript" src="jquery-ui-1.12.1/jquery-ui.js"></script>
           <script type="text/javascript" src="jquery.js"></script>
</body>
</html>

和JQuery用户界面 

    $(document).ready(function(){



    $("#verticalMenu").menu({
    menus: "div"
});

$("#box").dialog({

    title: "A thank you from us",
    autoOpen: true,
    draggable: true,
    resizable: false,
    height: 600,
    width: 300,
    show: 300,
    hide: 300,

    closeOnEscape: false,
    modal: true
});


  });

1 个答案:

答案 0 :(得分：0)

一个相对简单的方法是page loader。 将其固定在整个页面上，然后将其隐藏在document.ready上。

这里有很多CSS示例...这是一个非常简单的示例。虽然不是很漂亮，但是确实可以。

$(document).ready(function(){

        $("#verticalMenu").menu({
        menus: "div"
        });

      $("#box").dialog({

          title: "A thank you from us",
          autoOpen: true,
          draggable: true,
          resizable: false,
          height: 600,
          width: 300,
          show: 300,
          hide: 300,

          closeOnEscape: false,
          modal: true
      });


       $('.loading').fadeOut();

   

    });
/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<!DOCTYPE html>

<html>

<head>
    <link type="text/css" rel="stylesheet" href="style.css">
    <link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">


</head>

<body>
<div class="loading">Loading&#8230;</div>
  <div id="container">

        <div class="header">

        </div>


        <div id="nav">


        </div>


        <div class="sidebar">

        <ul id="verticalMenu">
          <li><a href="">Rome</a>
            <ul>
              <li><a href="">Early</a></li>
              <li><a href="">Middle</a></li>
              <li><a href="">Late</a></li>
            </ul>
           </li>
           <li>-</li>
           <li><a href="">Ancient Egypt</a>
            <ul>
              <li><a href="">Early</a></li>
              <li><a href="">Middle</a></li>
              <li><a href="">Late</a></li>
            </ul>
           </li>
           <li><a href="">Ancient Greece</a>
            <ul>
              <li><a href="">Early</a></li>
              <li><a href="">Middle</a></li>
              <li><a href="">Late</a></li>
            </ul>
           </li>
            </ul>
        </div>


              <div class="main">
                <div id="box">
                  <p>Thank you for visiting our site, we're hoping to see you again soon!</p>
                  <img src="ice.png">
              </div>


          </div>

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

</body>
</html>

相关问题
最新问题