Question

我正在开发一个网站，它有点沉重，所以我需要做那些加载动画，让网站在加载所有元素和图像之前开始。

请记住，我有很多CSS动画和jQuery动画，所以我不能使用document.ready，因为这只会停止Javascript动画而不是CSS动画。

即使没有加载动画，但最重要的是在加载所有内容之后延迟执行或出现每件事

Loading bar

Answer 1

将以下脚本添加到文档的head标记中。检查JSFiddle上的demo。

<html>
  <head>
    <script>
    /* SimplePageLoader */
    
    // Interpreter first checks loading state
    var isLoading = true,
        overlay = document.createElement("div");
    
    // A little bit of styling
    overlay.id = "before-content-overlay";
    overlay.style.background = "#ffffff";
    overlay.style.display = "block";
    overlay.style.position = "absolute";
    overlay.style.top = "0";
    overlay.style.bottom = "0";
    overlay.style.right = "0";
    overlay.style.left = "0";
    
    // SVG Spinner
    overlay.innerHTML = "<svg class=\"lds-spinner\" width=\"64pxheight=\"64pxxmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\" style=\"background: none;\"><g transform=\"rotate(0 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.9166666666666666s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(30 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.8333333333333334s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(60 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.75s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(90 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.6666666666666666s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(120 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.5833333333333334s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(150 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.5s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(180 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.4166666666666667s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(210 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.3333333333333333s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(240 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.25s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(270 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.16666666666666666s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(300 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"-0.08333333333333333s\" repeatCount=\"indefinite\"></animate></rect></g><g transform=\"rotate(330 50 50)\"><rect x=\"47\" y=\"24\" rx=\"9.4\" ry=\"4.8\" width=\"6\" height=\"12\" fill=\"#000000\"><animate attributeName=\"opacity\" values=\"1;0\" times=\"0;1\" dur=\"1s\" begin=\"0s\" repeatCount=\"indefinite\"></animate></rect></g></svg>";
    
    var spinner = overlay.childNodes[0];
    
    spinner.style.width = "64px";
    spinner.style.height = "64px";
    spinner.style.position = "absolute";
    spinner.style.left = spinner.style.top = "calc(50% - 32px)";
   
    // Once loaded
    window.onload = function() {
    	isLoading = false;
      
    	// Uncomment to test and comment/remove above statement
      // setTimeout(function() { isLoading = false }, 1000);
    };
    
    setInterval(function() {
      if (isLoading && !document.body.contains(overlay)) {
        document.body.appendChild(overlay);
      } else if (!isLoading && document.body.contains(overlay)) {
        // If loaded, overlay should disappear
        overlay.parentNode.removeChild(overlay);
      }
    }, 150);
    </script>
  </head>
  <body>
    <h1>Hidden until fully loaded/mounted</h1>
  </body>
</html>

延迟网站页面的执行

1 个答案: