yetangitu/canvas-based-HTML5-Comic-Book-Reader
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

very basic load status indicator added

Browse source
This commit is contained in:
Bala Clark 2010-07-10 17:13:13 +01:00
parent ec89ec2816
commit b23a6f26b2
3 changed files with 20 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

30
ComicBook.js
View file

@ -54,7 +54,8 @@ function ComicBook(id, srcs, opts) {
};
var options = merge(defaults, opts); // options array for internal use
var no_pages = srcs.length;
var pages = []; // array of preloaded Image objects
var canvas; // the HTML5 canvas object
var context; // the 2d drawing context
@ -100,7 +101,7 @@ function ComicBook(id, srcs, opts) {
context = canvas.getContext("2d");
// preload images if needed
if (pages.length !== this.srcs.length) { this.preload(this.srcs); }
if (pages.length !== no_pages) { this.preload(this.srcs); }
else { this.drawPage(); }
// add page controls
@ -126,17 +127,19 @@ function ComicBook(id, srcs, opts) {
*/
ComicBook.prototype.preload = function (srcs) {
if (srcs.length < buffer) { buffer = srcs.length; } // don't get stuck if the buffer level is higher than the number of pages
if (no_pages < buffer) { buffer = no_pages; } // don't get stuck if the buffer level is higher than the number of pages
var i = 0; // the current page counter for this method
$(canvas).before('<div id="status"><p></p></div>');
// I am using recursion instead of a forEach loop so that the next image is
// only loaded when the previous one has completely finished
function preload(i) {
var page = new Image();
// console.log("starting to load: " + srcs[i]);
$("#status p").text("loading page " + (i + 1) + " of " + no_pages);
page.src = srcs[i];
@ -148,14 +151,14 @@ function ComicBook(id, srcs, opts) {
loaded += 1;
// there are still more pages to load, do it
if (loaded < srcs.length) {
if (loaded < no_pages) {
i += 1;
preload(i);
}
// start rendering the comic when the buffer level has been reached
if (loaded === buffer + 1) { ComicBook.prototype.drawPage(); }
if (loaded === srcs.length) { /* console.log("all loaded"); */ }
if (loaded === buffer) { ComicBook.prototype.drawPage(); }
if (loaded === no_pages) { $("#status").remove(); }
};
}
@ -299,7 +302,7 @@ function ComicBook(id, srcs, opts) {
var book;
window.onload = function() {
$(document).ready(function() {
var pages = [
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/00.jpg",
@ -309,7 +312,6 @@ window.onload = function() {
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/04.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/05.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/06.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/06.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/07.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/08.jpg",
"http://dev.justforcomics.com/get/image/?f=comics/extracted/oni_whiteout_melt_1/09.jpg",
@ -339,8 +341,8 @@ window.onload = function() {
book = new ComicBook("comic", pages, options);
book.draw();
};
});
window.onresize = function() {
$(window).resize(function() {
book.draw();
};
});

2
reader.html
View file

@ -9,6 +9,8 @@
<link rel="stylesheet" href="reset.css" media="screen, projection" />
<link rel="stylesheet" href="styles.css" media="screen, projection" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="ComicBook.js"></script>
</head>
<body id="body"">

2
styles.css
View file

@ -1,3 +1,5 @@
body {
background-color: #000;
color: #fff;
font-size: 12px;
}