预加载百分比 - javascript/jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4999703/
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 with percentage - javascript/jquery
提问by anvd
I did a Google search and I cannot find a way to do a loading with percentage. Anyone know how I can find an example of that?
我进行了谷歌搜索，但找不到一种方法来进行百分比加载。有谁知道我怎么能找到这样的例子？
I need a preload for a website from 0-100 without bar, before show the content, but I cannot find any example.
在显示内容之前，我需要一个 0-100 的网站预加载，但我找不到任何示例。
采纳答案by TheVillageIdiot
If you mean you want to show the content only when it is fully loaded, you may try following two options:
如果您的意思是仅在内容完全加载时才显示内容，您可以尝试以下两个选项：
1) wrap all content inside a <div id="wrapper" style="display:none;"></div>tag and on load complete event show it like this:
1) 将所有内容包装在一个<div id="wrapper" style="display:none;"></div>标签中，并在加载完成事件时显示如下：
$(function(){
$("#wrapper").show();
});
2) If this still does not solves your purpose, you can load empty page and fetch content using ajax:
2）如果这仍然不能解决您的目的，您可以使用ajax加载空页面并获取内容：
$(function(){
$.ajax({
.......//AJAX params
.......
success:function(msg){
$("#wrapper").html(msg);//DO NEEDFUL WITH THE RETURNED VALUE
});
});
EDIT: Using queryLoaderscript provided by gayadesignI was able to achieve some success :D
编辑：使用queryLoader由gayadesign提供的脚本我能够取得一些成功：D
I had to made some changes to the queryLoader.jsfile from line 127 to 151. The changed script is as follows. Try it yourself.
我不得不对queryLoader.js文件从第 127 行到第 151 行进行了一些更改。更改后的脚本如下。自己试试吧。
$(QueryLoader.loadBar).css({
position: "relative",
top: "50%",
font-size:40px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
});
},
animateLoader: function() {
var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
if (perc > 99) {
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 5000, "linear", function() {
$(this).html("<strong>100%</strong>");//MY EDIT
QueryLoader.doneLoad();
});
} else {
$(QueryLoader.loadBar).stop().animate({
width: perc + "%"
}, 5000, "linear", function() {
//MY EDIT
$(this).html("<strong>"+Math.round(perc)+"%</strong>");
});
}
},
回答by elin3t
I recommend this plugin. Its amazing download from http://demo.inwebson.com/download/jpreloader.zipsee in action here http://www.inwebson.com/demo/jpreloader/
我推荐这个插件。其惊人的下载来自http://demo.inwebson.com/download/jpreloader.zip在这里查看操作http://www.inwebson.com/demo/jpreloader/
<script type="text/javascript" src="js/jpreLoader.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('body').jpreLoader();
});
// ]]></script>
here are the links to new version jpreloader 2.1 http://demo.inwebson.com/download/jpreloader-v2.ziphttp://www.inwebson.com/demo/jpreloader-v2/
这里是新版本 jpreloader 2.1 的链接 http://demo.inwebson.com/download/jpreloader-v2.zip http://www.inwebson.com/demo/jpreloader-v2/
回答by elwyn
You can't.
你不能。
As zzzzBov said, it isn't known how much content there will be, or what size that content is.
正如 zzzzBov 所说，不知道会有多少内容，或者内容有多大。
You could 'fake' it, with something like this (for the example I am using images):
你可以“伪造”它，像这样（例如我使用图像）：
var percentCounter = 0;
$.each(arrayOfImageUrls, function(index, value) {
$('<img></img>').attr('src', value) //load image
.load(function() {
percentCounter = (index / arrayOfImageUrls.length) * 100; //set the percentCounter after this image has loaded
$('#yourProgressContainer').text(percentCounter + '%');
});
});
As I mentioned this isn't a TRUE percentage of the sites loading, but a rough estimate of the images that have loaded, assuming each image is roughly the same size.
正如我提到的，这不是网站加载的真实百分比，而是已加载图像的粗略估计，假设每个图像的大小大致相同。
回答by esafwan
See this Project. It does what you want nicely.
看到这个项目。它可以很好地满足您的需求。
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
The demo is hosted here
演示在此处托管
Download it here
在这里下载
http://www.gayadesign.com/scripts/queryLoader/queryLoader.zip
http://www.gayadesign.com/scripts/queryLoader/queryLoader.zip
