-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Percentage of loading #319
Comments
What do you exactly mean by downloading? You can download to your computer, but I suppose you are talking about uploading a book from a sever/client to ePub ? |
No. When you load an ebook for the first time with epub.js, it can take awhile. It shows the gif of loading, but in some books it takes forever to finally load for first time, and then put the book in storage. What I want is an percentage indicator, like %1 Loading.. %2 Loading.. %60 Loading.. ... |
Thanks for the quick answer, I am really in a hurry :( |
Is this with a zipped ePub file? |
Sorry for the late reply, I don't know this part of code but I imagine there is a hook for it. So if you could take a look at hooks directory, maybe you can find something useful. Another option is to implement it in your javascript code, but I don't know what technology/library you are using and how your code looks like, so I would need more input and ideally the code itself. Another option would be to implement custom javascript events and respond to them with starting/stopping a loading spinner. |
@fchasen yes, it is. all of them are zipped .epub files. @matewilk well, the spinner is already showing up. i had checked out the hooks directory, but all I came up was a lazy solution. |
I'm NOT one of the authors of ePub library, I'm just an ordinary user of ePub class but can you please tell me where do you keep your books and how you upload them? I personally keep my books in the app (my own app on top of ePub) directory as zipped files, and I'm uploading the books using node.js by providing ePub constructor with a url to my node.js api url. It would look something like this: var ajaxRequest = new XMLHttpRequest();
ajaxRequest.upload.addEventListener('progress', function(event){
//progress is a variable usually used to change styling of an element on the page
var progress = Math.ceil(event.loaded / event.total) * 100 + '%';
//so here you would change the width of the element on the page (progressbar)
}, false); So basically what I'm saying here, that I don't really know where the problem is, is it your app architecture problem, or ePub library itself ? What are your findings ? Do you have a github repo so I could take a look at it ? |
In localhost doesn't take any time, is fast. The problem (as always) is when people access. Sartre was right, hell is other people. Adding a eventlistener is a good idea, but ¿where the .loaded and .total event are defined? The only thing I have to support me on, is the function ePubReader() (when everything starts), and the book.ready.all.then() (when everything is loaded) So.. ¿the total would be the size of the file? |
So the first thing I would recommend is trying an unzipped epub. It will be much faster as it doesn't need to wait for the entire epub to load and doesn't need to decode the images. The progress listener seems like a great approach if the issue is downloading the epub, though there will be some processing time after that won't be accounted for. I'd add progress to the request function here https://github.com/futurepress/epub.js/blob/master/src/core.js#L18 xhr.addEventListener("progress", updateProgress);
// progress on transfers from the server to the client (downloads)
function updateProgress (oEvent) {
if (oEvent.lengthComputable) {
var percentComplete = oEvent.loaded / oEvent.total;
// ...
} else {
// Unable to compute progress information since the total size is unknown
}
} from: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest |
Well, I'm just keeping my books on the server, and I send ajax request to fetch a book from it and pass to the client (front-end) app where ePub constructor is invoked. Based on what you said, I assume, the problem is with ePubReader. You have some events that you can listen to, so that's great. If it takes ages to load, than I would add some funny text underneath the spinner to hold the user a bit longer before eventually dropping the page. But I suppose it doesn't take so long to finally display the book. P.S. load and total event properties are part of XMLHttpRequest (ajax) and @fchasen provided you with the url to get to know a bit more about it. Basically you don't have to worry about these properties, they just work and are part of the ajax implementation. |
Take Netflix for example. I know that the size of books and movies are a hugh difference, but if they didn't show a percentage, we would never know when the movie is about to start. With eBooks is almost the same things. Locally, everything always will work fast. Online, it's a whole other thing. Believe me, in some books you will want to show the percentage of loading. @fchasen @matewilk I tried both codes, none of them work :'( EPUBJS.Reader = function(bookPath, _options) { I also tried after and before the epubReader() function, and in the epub.min.js, but it throws: xhr is not defined. |
Did you use dev tools to see what the problem is, did it return any errors ? Are you sure you're not using core ? |
This is the line in my reader.js: But this is for setting up, that leaves me with the first question.. ¿how can I do it?
|
First of all, you shouldn't modify any of the epub library files (what if some day you decide that you need to update the library to the latest version?). The best practice is to - for example - extend the prototype of the object you are planning to modify. (I'd suggest you go through a tutorial about it) I'm not sure what @fchasen has on his mind when suggesting modifying this function: but I would completely override Again, it is very difficult to give advices, having very limited knowledge what is wrong in your codebase. |
Perhaps @fchasen understood me, it is just a progress bar with percentage while the book is loading. I'm still trying, but nothing.. :( |
Any news about this? My solution is working, but it was a internal hack in the library. I changed the
Then in my code:
|
hi.. novice question here.. can you explain more how you trigger 2nd part of your code? where did you place it, and how did you actually manage to get the load progress? thankyou so much |
+1 It would be great if there was hook to get updates about the download when using |
Hi everyone,
Some ebooks with many images take forever to download. And that's ok.
But I really need to show a percentage of the download when the user click the eBook for the first time, because it really looks like an error, «wow, something happen to this. well, I better go» said the user.
Something like: %53 Loading
So.. ¿how can I do it?
Thanks in advance!
The text was updated successfully, but these errors were encountered: