Javascript load Page,load css,load js实现代码

实现 Javascript 来控制页面的加载过程，包括页面主体内容的加载、CSS 文件的加载和 JavaScript 文件的加载。在加载过程中，我们需要保证页面的正确显示和交互功能。

控制页面加载

了解 JavaScript 来控制页面的加载过程，需要关注以下三个关键点：

1. 等待页面主体内容加载
2. 加载 CSS 和 JavaScript 文件
3. 等待 JavaScript 文件加载完成

等待页面主体内容加载

在页面主体内容加载完成之前，我们需要显示一个加载画面，让用户知道网站正在加载。可以在页面中添加一个 div 容器元素，在其中加入支持动画的加载画面。

<div id="loading">
  <div class="spinner"></div>
</div>

需要在 CSS 中设置 .spinner 类的样式，来支持加载画面的动画效果。以下为一个简单的示例：

.spinner {
    margin: auto;
    width: 40px;
    height: 40px;
    position: relative;
    text-align: center;
    -webkit-animation: sk-flow 1.2s infinite ease-in-out;
    animation: sk-flow 1.2s infinite ease-in-out;
  }

  @-webkit-keyframes sk-flow {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
  }

  @keyframes sk-flow {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
  }

为了实现加载页面主体内容的功能，可以使用 JavaScript 监听文档加载状态，判断文档是否已经完成加载，然后隐藏加载画面，显示文档主体内容。

document.onreadystatechange = function() {
   if (document.readyState === "complete") {
      setTimeout(function(){
         document.getElementById("loading").style.display = "none";
      },1000);
   }
}

加载 CSS 和 JavaScript 文件

我们可以在页面中使用 <link> 标签和 <script> 标签来加载 CSS 文件和 JavaScript 文件。例如，我们需要在页面中引入一个名为 styles.css 的样式表文件：

<link rel="stylesheet" href="styles.css">

同时，我们需要在页面中引入一个名为 script.js 的 JavaScript 文件：

<script src="script.js"></script>

等待 JavaScript 文件加载完成

为了确保 JavaScript 文件已经加载完成，我们可以在 JavaScript 文件中实现一个回调函数。该回调函数负责页面的交互逻辑，必须等待 JavaScript 文件加载完成后才可调用。

以下是一个简单的 JavaScript 代码示例，它会在 script.js 加载完成后，执行定义好的 init() 回调函数：

function loadScript(url, callback){

  var script = document.createElement("script")
  script.type = "text/javascript";

  if (script.readyState){  // for IE
    script.onreadystatechange = function(){
      if (script.readyState == "loaded" || script.readyState == "complete"){
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {  // for other browsers
    script.onload = function(){
      callback();
    };
  }

  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

loadScript("script.js", function(){
   init();
});

通过上述控制页面加载的方法，可以使页面加载更加平滑、简单和高效。