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

2
reader.html
View file

@ -9,6 +9,8 @@
<link rel="stylesheet" href="reset.css" media="screen, projection" /> <link rel="stylesheet" href="reset.css" media="screen, projection" />
<link rel="stylesheet" href="styles.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> <script src="ComicBook.js"></script>
</head> </head>
<body id="body""> <body id="body"">

2
styles.css
View file

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