diff --git a/README.md b/README.md index 72685c2..1181dfc 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,9 @@ At the top of the pbp/panelbypanel.js there are a few settings you can easily ch * menuDelay - how long to keep the top menu on the screen, after the page initally loads in milliseconds * pbpMaxWidth/Height - switch to panel by panel mode by default when on a dislpay less than this width or height. Note that these numbers are not exact pixels, as high dpi devices add a scaling factor to complicate things a bit. Setting these to a value that fits your comics may require some experimenting. * perPageColor - use the background color for each page defined in the ACBF file. If set to false, it uses the background defined in the style sheet. +* preloadnext/prev - if to preload the next or previous page. By default it will preload both. * htaccess - see below + * debug - print out extra debug information to the console Changing what meta data to show in the about comic dialog should be relatviely straight forward if you're familiar with HTML, by simply editing the pbp.php. diff --git a/pbp/panelbypanel.js b/pbp/panelbypanel.js index 0b52c03..4800613 100644 --- a/pbp/panelbypanel.js +++ b/pbp/panelbypanel.js @@ -10,6 +10,9 @@ const pbpMaxWidth = 800; const pbpMaxHeight = 1000; // Use per page background color. If not set you can control the background from the style sheet const perPageColor = true; +// Preload the next or previous page or both. Preloading both is going to take longer on a slow connection. +const preloadprev = true +const preloadnext = true // Use htaccess mod rewrite const htaccess = true; // Pops up alerts with viewport height and width, to help debug pbpMaxWidth and Height @@ -100,6 +103,7 @@ class PanelByPanel { document.getElementById('loadingcontainer').style.display = 'none' this.artist.preload() }.bind(this); + this.ready = true } dont(event) { @@ -302,7 +306,14 @@ class Draw { } flip() { - document.getElementById('page').src = this.comic.root+"comics/"+this.comic.pages[this.comic.currentPage].image; + if (document.getElementById('page').src != this.comic.root+"/comics/"+this.comic.pages[this.comic.currentPage].image) { + document.getElementById('page').src = this.comic.root+"comics/"+this.comic.pages[this.comic.currentPage].image; + } else { + this.drawnPage = this.comic.currentPage + this.focus() + document.getElementById('loadingcontainer').style.display = 'none' + this.preload() + } if (htaccess) { document.getElementById('thumbsbtn').href = this.comic.root+this.comic.name+'/thumbs/'+this.comic.currentPage; } else { @@ -324,11 +335,11 @@ class Draw { if (perPageColor) { this.setBackground(); } - // this.preload(); } preload() { - if (this.comic.currentPage < this.comic.pages.length - 1) { + if (this.comic.currentPage < this.comic.pages.length - 1 && + preloadnext == true) { let nextimg = new Image(); let self = this; nextimg.onload = function() { @@ -337,7 +348,7 @@ class Draw { }; nextimg.src = this.comic.root+"comics/"+this.comic.pages[this.comic.currentPage + 1].image; } - if (this.comic.currentPage > 0) { + if (this.comic.currentPage > 0 && preloadprev == true) { let previmg = new Image(); let self = this; previmg.onload = function() {