Question

所以我正在为我的漫画开发一个阅读器，因为图像需要一些时间来下载我想要预装它们。这样做意味着必须创建一个Progress来显示正在下载的页面的进度，然后读者才能开始阅读它。我已按照此链接Can GIT, Mercurial, SVN, or other version control tools work well when project tree has binary files?

进行设置

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

如果您检查上面提供的链接，它会显示包含我将在下面实现的代码的页面。页面加载后，我将把jquery隐藏加载div。如果可能，还可以在下载栏旁边更改文本吗？

很抱歉这么多问题，还在学习＆gt;〜＆lt;

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

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

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

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

Answer 2

这有效

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 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
}
});

如何使用Jquery调整进度条？

3 个答案: