Javascript 预加载网站
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6003648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preload a website
提问by BDGapps
I'm looking to preload a website. I only want a loading bar once on the site. When its loading I want every page to pre load. How would I do this?
我正在寻找预加载网站。我只想要一个加载栏在网站上一次。当它加载时，我希望每个页面都预加载。我该怎么做？
回答by Andrei Sfat
A Right Click for Source code can be helpful
右键单击源代码可能会有所帮助
Here is the source where you can find the jQuery for it. http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
这是您可以找到它的 jQuery 的来源。 http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
回答by Daniel Ruf
you could replace or hide the body while it is loading and showing that the page loads and when its done the content is displayed
您可以在加载和显示页面加载时替换或隐藏正文，并在完成后显示内容
there was an older post here about this: How can I create a "Please Wait, Loading..." animation using jQuery?
这里有一篇关于此的旧帖子： 如何使用 jQuery 创建“请稍候，正在加载...”动画？
should be that what you want
应该是你想要的
an html file for script ? think its just working with .js
脚本的 html 文件？认为它只是使用 .js
well you have to add it on every page using
那么你必须使用它在每个页面上添加它
<script type="text/javascript" src="preload.js"></script>
回答by STEEL
Header
标题
<script type="text/javascript">
function hideLoadingLayer(){
document.getElementById("loading_layer").style.visibility="hidden";
}
</script>
Body
身体
<body onload="hideLoadingLayer();">
Div
分区
<div id="loading_layer"><img src="images/loading.gif" alt="" width="550" height="400" border="0" /></div>
CSS
CSS
#loading_layer{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:999999;
background-color: #FFF;
text-align: center;
margin: 0 auto;
}
Inserted from JavaScript (website) Web page preloader
回答by Aleksandar
EDIT
编辑
Ok, this question is old, and link provided is dead, and some users provide nice correction on how to make usable answer, I decided to edit my answer explaining the process behind preloading instead providing just a link.
好吧，这个问题很旧，提供的链接已经失效，一些用户对如何制作可用答案提供了很好的更正，我决定编辑我的答案，解释预加载背后的过程，而不是只提供一个链接。
Preloading webpage is simply displaying some text, image or something else while the page is rendering, to notify the visitors that something is happening in the background. Easiest way is to include jQuery which simplify the whole process. Our main goal is to display, let say text, while page is loading. So, our task is displaying text first, then when the page is fully loaded, hide text and display content.
预加载网页只是在页面呈现时显示一些文本、图像或其他内容，以通知访问者在后台发生了一些事情。最简单的方法是包含简化整个过程的 jQuery。我们的主要目标是在页面加载时显示，比如说文本。因此，我们的任务是先显示文本，然后在页面完全加载时隐藏文本并显示内容。
<script src="http://code.jquery.com/jquery-latest.min.js"></script> // include jQuery source
<script>
$('.content').hide(); // hide content while rendering
$(document).ready(function(){ // When page is fully loaded...
$('.preload').hide(); // hide preloader
$('.content').show(); // and show content
});
<div class="preload">Loading...</div>
<div class="content">Some generic content here</div>
This is just basic example, and you can play with jQuery to make some nice preloaders.
这只是基本示例，您可以使用 jQuery 来制作一些不错的预加载器。
ORIGINAL
原来的
This is my first preloader. It's very simple. While page is loading, it shows preloader, and then hide preloader and show page. Preload web site using jquery (simple)
这是我的第一个预加载器。这很简单。当页面加载时，它显示预加载器，然后隐藏预加载器并显示页面。 使用 jquery 预加载网站（简单）
