延迟网站页面的执行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了延迟网站页面的执行相关的知识，希望对你有一定的参考价值。
我正在开发一个网站，它有点沉重，所以我需要做那些加载动画，使网站在加载所有元素和图像之前开始。
请记住，我有很多CSS动画和jQuery动画，所以我不能使用document.ready因为这只停止javascript动画而不是CSS动画。
即使没有加载动画，但最重要的是在加载所有内容之后延迟每件事的执行或外观
答案
将以下脚本添加到文档的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>以上是关于延迟网站页面的执行的主要内容，如果未能解决你的问题，请参考以下文章