我进行了谷歌搜索，但找不到一种方法来进行百分比加载。有谁知道我怎么能找到这样的例子？
在显示内容之前，我需要一个 0-100 的网站预加载，但我找不到任何示例。
预加载百分比 - javascript/jquery
IT技术
javascript
jquery
loading
progress
2021-02-26 21:19:00
4个回答
我推荐这个插件。其惊人的下载来自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>
这里是新版本 jpreloader 2.1 的链接 http://demo.inwebson.com/download/jpreloader-v2.zip http://www.inwebson.com/demo/jpreloader-v2/
如果您的意思是仅在内容完全加载时才显示内容，您可以尝试以下两个选项：
1) 将所有内容包装在一个<div id="wrapper" style="display:none;"></div>标签中，并在加载完成事件时显示如下：
$(function(){
$("#wrapper").show();
});
2）如果这仍然不能解决您的目的，您可以使用ajax加载空页面并获取内容：
$(function(){
$.ajax({
.......//AJAX params
.......
success:function(msg){
$("#wrapper").html(msg);//DO NEEDFUL WITH THE RETURNED VALUE
});
});
编辑：使用queryLoader由gayadesign提供的脚本我能够取得一些成功：D
我不得不对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>");
});
}
},
你不能。
正如 zzzzBov 所说，不知道会有多少内容，或者内容有多大。
你可以“伪造”它，像这样（例如我使用图像）：
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 + '%');
});
});
正如我提到的，这不是网站加载的真实百分比，而是已加载图像的粗略估计，假设每个图像的大小大致相同。