Javascript 如何在显示之前预加载网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4571423/
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
How to preload a webpage before showing it?
提问by xRobot
I have created a simple webpage with several images, but when a user visits it, the browser loads the images one at a time, instead of all at once.
我创建了一个包含多张图像的简单网页，但是当用户访问它时，浏览器一次加载一个图像，而不是一次加载所有图像。
I want instead to first show a "loading" gif in the center of the page and then, when all the images are downloaded, show the entire webpage to the user at once..
我想先在页面中央显示一个“正在加载”的 gif，然后在下载所有图像后，立即向用户显示整个网页。
How can I do this?
我怎样才能做到这一点？
回答by Sarfraz
You can show a loader image by putting it somewhere im <img>tag and use below js code to hide it later on when all images are shown:
您可以通过将加载器图像放在 im<img>标记的某个位置来显示加载器图像，并在稍后显示所有图像时使用下面的 js 代码将其隐藏：
window.onload = function(){
var el = document.getElementById('elementID');
el.style.display = 'none';
};
Where elementIDis supposed to be the id of loader element/tag.
哪里elementID应该是加载器元素/标签的 id。
The loadevent fires when all images/frames/external resources are loaded, so by the time that event fires, all images are loaded and we therefore hide the loading message/image here.
load当加载所有图像/帧/外部资源时触发该事件，因此在该事件触发时，所有图像都已加载，因此我们将加载消息/图像隐藏在此处。
回答by Alex Vidal
Edit: I defer to Keltex's answer.It's a much better solution. I'll leave mine here for posterity (unless I should delete the content and my answer entirely? I'm new here).
编辑：我遵循 Keltex 的回答。这是一个更好的解决方案。我会把我的留给后代（除非我应该完全删除内容和我的答案？我是新来的）。
Another solution, which was used fairly frequently in the past, is to create a landing page that preloads all of your images. When the preloading is done, it redirects to the actual site. In order for this to work, you'd need to get the URLs to all of the images you want to load, and then do something like this:
另一个过去经常使用的解决方案是创建一个预加载所有图像的登录页面。预加载完成后，它会重定向到实际站点。为了使其工作，您需要获取要加载的所有图像的 URL，然后执行以下操作：
# on index.html, our preloader
<script type='text/javascript'>
// add all of your image paths to this array
var images = [
'/images/image1.png',
'/images/image2.png',
'/images/image3.png'
];
for(var i in images) {
var img = images[i];
var e = document.createElement('img');
// this will trigger your browser loading the image (and caching it)
e.src = img;
}
// once we get here, we are pretty much done, so redirect to the actual page
window.location = '/home.html';
</script>
<body>
<h1>Loading....</h1>
<img src="loading.gif"/>
</body>
回答by Keltex
You can do this with JQuery. Say your page looks like this:
你可以用 JQuery 做到这一点。假设您的页面如下所示：
<body>
<div id='loader'>Loader graphic here</div>
<div id='pagecontent' style='display:none'>Rest of page content here</div>
</body>
You can have a JQuery function to show pagecontent when the entire page is loaded:
您可以使用 JQuery 函数在加载整个页面时显示页面内容：
$(document).ready(function() {
$(window).load(function() {
$('#loader').hide();
$('#pagecontent').show();
});
});
回答by Syed
HTML
HTML
<div id="preloader">
<div id="loading-animation"> </div>
</div>
JAVASCRIPT
爪哇脚本
<script type="text/javascript">
/* ======== Preloader ======== */
$(window).load(function() {
var preloaderDelay = 350,
preloaderFadeOutTime = 800;
function hidePreloader() {
var loadingAnimation = $('#loading-animation'),
preloader = $('#preloader');
loadingAnimation.fadeOut();
preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
</script>
CSS
CSS
#preloader {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
position: fixed;
background-color: #fff;
}
#loading-animation {
top: 50%;
left: 50%;
width: 200px;
height: 200px;
position: absolute;
margin: -100px 0 0 -100px;
background: url('loading-animation.gif') center center no-repeat;
}
回答by Bharath
Create a div with class name preloader and put a loader inside that div.
创建一个类名为 preloader 的 div 并在该 div 中放置一个加载器。
style the class preloader just like below
样式类预加载器就像下面一样
.preloader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: white;
/* background-color is would hide the data before loading
text-align: center;
}
Html
html
<div class="preloader">
Any loader image
</div>
Jquery
查询
$(window).load(function(){
$('.preloader').fadeOut(); // set duration in brackets
});
A simple page loader is ready....
一个简单的页面加载器已准备就绪....
