如何使用 Jquery 调整进度条？

Question

所以我正在为我的漫画开发一个阅读器，由于图片需要一些时间来下载，我想预加载它们。这样做意味着必须创建一个进度来显示正在下载的页面的进度，然后读者才能开始阅读它。我已经设置好了，你可以在这个链接上看到here

我想知道是否有一个简单的轻量级代码可以用来改进。我正在考虑使用 Pace.JS，但如果有更轻量级的简单替代方案，那么我更愿意这样做，因为我还想了解 ProgressBar 的工作原理，也许还想改进它并了解更多信息：D

如果您检查上面提供的链接，它会显示带有我将在下面实现的代码的页面。页面加载后，我将 jquery 隐藏加载 div。如果可能的话，是否有办法同时更改下载栏旁边的文本？

抱歉这么多问题，还在学习中>~

HTML

<div id="loading">
<img id="loading_logo" class="animated infinite bounce" src="source_images/new_logo_compressed.png" />
    <div id="progressbar">
    <div></div>
    </div>
    <div class="text">Loading... 30%</div>
</div>
<a href="#" id="left" class="button hvr-icon-back"><div id="button_text">Next Page</div></a>
<a href="#" id="right" class="button hvr-icon-forward"><div id="button_text">Last Page</div></a>

<div >
<img id="manga" src="source_images/00.jpg" />
</div>

CSS

#loading {
background-color: black;
opacity: 0.75;
position: fixed;
z-index:1;
height:100%;
width:100%;
}

#loading_logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 30vh;
padding-bottom: 5vh;
width: 20vw;
}
#progressbar {
border: 3px solid #fff;
border-radius: 20px;
padding: 2px;    
margin-left: 20vw;
margin-right: 20vw;

}
#progressbar > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
width: 30%;
height: 18px;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 20px;
}
.text {
color: #fff;
margin-top: 15px;
font-size: 21px;
font-weight: bold;
text-align: center;
}

Jquery（让阅读器工作）

var count = 0;
var images = ["source_images/00.jpg", "source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg"];

// Preloading Images

$.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
$("<img />").attr("src", arguments[i]);
}
}

$.preloadImages("source_images/00.jpg", "source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg");


$(function manga () {
$("#left").click(function () {
    ++count;
    var img = images[count % images.length];
    //alert(img);
    $("#manga").attr("src", img);
    //alert("clicked");
    //manga();
});
$("#right").click(function () {
    if(count == 0)
    {
        count = images.length-1;
    }
    else {
        --count;
    }

    var img = images[count % images.length];
    //alert(img);
    $("#manga").attr("src", img);
    //alert("clicked");
    //manga();
});
//manga();
});

Answer 1

这行得通

var imgs =  { "first":0,"last":6, "path":"http://chocobento.x10.mx/chocobento/source_images/", "current":0}, 
    images = [],
    width = 0,
    pct = Math.ceil(100/(imgs.last-imgs.first))
    count=0;

function preload() {
  for (var i=imgs.first;i<=imgs.last;i++) {
    images[i] = new Image();
    images[i].onload=progress;
  }
  next();
} 
function next() {
  if (imgs.current > imgs.last) {
    $("#loading").hide(); // or setTimeout(function() {$("#loading").hide(); },200);
    return;
  }
  images[imgs.current].src=imgs.path+pad(imgs.current)+".jpg";      
  imgs.current++;
}
function pad(num) { return num >= 10?num:("0"+num).slice(-2);}

function progress() {
  width+=pct;
  if (width>100) width=100;
  $("#progressbar>div").css({"width":width+"%"});
  $(".text").html("Loading... "+width+"%");
  next();
}  

$(function() {
  preload();
  $("#left").click(function () {
    ++count;
    if (count>imgs.last) count = imgs.first; // wrap
    $("#manga").attr("src", images[count].src);
  });
  $("#right").click(function () {
     --count;
    if(count < imgs.first) count = imgs.last; // wrap
    $("#manga").attr("src", images[count].src);
  });
});

#loading {
	background-color: black;
	opacity: 0.75;
	position: fixed;
	z-index:1;
	height:100%;
	width:100%;
    }

    #loading_logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 30vh;
    padding-bottom: 5vh;
	width: 20vw;
    }
    #progressbar {
    border: 3px solid #fff;
    border-radius: 20px;
    padding: 2px;    
	margin-left: 20vw;
    margin-right: 20vw;

    }
    #progressbar > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    width: 1%;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 20px;
    }
    .text {
    color: #fff;
    margin-top: 15px;
    font-size: 21px;
    font-weight: bold;
	text-align: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="loading">
    <img id="loading_logo" class="animated infinite bounce" src="http://chocobento.x10.mx/chocobento/source_images/new_logo_compressed.png" />
        <div id="progressbar">
      	<div></div>
    	</div>
        <div class="text">Loading... 0%</div>
    </div>

Answer 2

我更喜欢你已经提到的pace.JS..在这篇文章中有人尝试了类似的东西：How to show a running progress bar while page is loading

如果你想开始学习 jquery，你可以去这里：http://www.jquery-tutorial.net/

有一个关于 DOM 操作和 Ajax 调用的很好的文档。这对你有帮助

Answer 3

您可以在不使用 Pace.Js 的情况下完成此操作。这只需要jQuery

$.ajax({
xhr: function()
{
  var xhr = new window.XMLHttpRequest();
  //Upload progress
  xhr.upload.addEventListener("progress", function(evt){
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    //Do something with upload progress
    console.log(percentComplete);
  }
}, false);
//Download progress
xhr.addEventListener("progress", function(evt){
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    //Do something with download progress
    console.log(percentComplete);
  }
}, false);
  return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data){
//Do something success-ish
}
});