Loading gif image during pdf load #96

Activity

1. GaboDot commented on Sep 19, 2014

   

   GaboDot

   on Sep 19, 2014

   More actions

   It would be helpful, large pdf's take extra time to show complete... I hope we get an answer soon = )
2. kossebau

   added

   enhancement

   on Jan 13, 2015
3. kossebau

   added this to the ViewerJS some future version milestone on Jan 13, 2015
4. kossebau commented on Feb 12, 2015

   

   kossebau

   on Feb 12, 2015

   Contributor

   More actions

   There is no implementation yet, but I agree it would be good to have. Anyone up for coding one? :)

   👍React with 👍1Reacted by Benyamin Limanto
5. Shreeshrii commented on Mar 24, 2015

   

   Shreeshrii

   on Mar 24, 2015

   More actions

   Is there any option that can be set for displaying first page after it has been downloaded and let the file continue downloading, rather than waiting for whole file to download?
6. kossebau commented on Mar 24, 2015

   

   kossebau

   on Mar 24, 2015

   Contributor

   More actions

   Is there any option that can be set for displaying first page after it has been downloaded and let the file continue downloading, rather than waiting for whole file to download?

   No, nothing implemented at the moment to support that. Would be nice to have, agreed. But currently both the PDF and the ODF plugins only deal with complete files, so they have to be downloaded first completely.

   😄React with 😄1Reacted by Benyamin Limanto
7. Shreeshrii commented on Mar 24, 2015

   

   Shreeshrii

   on Mar 24, 2015

   More actions

   ok. Thanks!
8. vhugogarcia commented on Apr 17, 2015

   

   vhugogarcia

   on Apr 17, 2015

   More actions

   Any workaround or update to enable a loading alert or something.... ? thanks in advance
9. frankiekam commented on May 27, 2015

   

   frankiekam

   on May 27, 2015

   More actions

   You mean like this?
   
   I managed to solve it. The trick is to modify this code inside index.html:

   #canvasContainer {overflow: auto;padding-top: 6px;padding-bottom: 6px;position: absolute;top: 32px;right: 0;bottom: 32px;left: 0;text-align: center;background-color: #888;background-image: url(images/texture.png)}

   Specifically the "background-image:" part of the CSS. What you need to do is to change texture.png to an animated loading icon (i.e., an animated gif file), set the image to non-repeating and then set the image so that it appears in the centre of the screen. You can see it live in action here: http://www.cambridgekids.org/m29/course/view.php?id=2
   Login as guest. Anything is possible with programming. Endless possibilities. Cheers Frankie Kam, Malaysia.

   👍React with 👍2Reacted by Benyamin Limanto and Khalid Ansari
10. guidodo commented on Apr 17, 2016

    

    guidodo

    on Apr 17, 2016

    More actions

    In essence all that is needed (for PDF files) is to split up:

    PDFJS.getDocument(location).then(function loadPDF(doc) {

    and hook up a onProgress function:

    var pdfjsTask = PDFJS.getDocument(location);
    pdfjsTask.onProgress = function(obj) { ... }
    pdfjsTask.then(function loadPDF(doc) {
    

    Full patch (against source code) is attached. It'll show an overlay with a HTML5 progress bar during download.