Lazy Load pdf - pdfjs
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hoping to get a demo of the following

Load this pdf -
https://alex.smola.org/drafts/thebook.pdf

if you need to download it to enable something like fast web view on the pdf , or set some specific CORS headers to make this demo work, its np.

I need the following features in the demo

- load pdf to a specific page via url param like pg=55

- load just the current page and then pre load the next 5 pages (we want to make sure we dont need to load hundreds of pages if the user just needs a smaller scope)

- lazy load the next {5} pages as the users scrolls and gets to some configurable threshold

- as the user scrolls the url should update with the current page in view

Please leave a comment on my solution if you have any issues with getting it to run or the way it works, or anything else just let me know.
Taiiwo 23 days ago
19 days ago

Crowdsource coding tasks.

2 Solutions


Hello. Find attached a zip file containing 3 files: The PDF you supplied, and all-in-one html file, and a simple python script for running a web server that will host the html file.

Get-style parameters are loaded from the "hash" portion of the url (example: http://localhost:8000/#pg=11). Each time the user scrolls within 200 pixels of the bottom of the page, the next 5 pages are loaded. Each time the user scrolls to a new page, the url is updated.

Note: to jump to a page using the url, change the "pg" parameter, and then reload the page.

Zip file: https://sr.ht/HNcC.zip

hey there, i uploaded your sample to aws s3 to test and I'm seeing it download the entire file? can you double check me on this and let me know - https://crts-assets.s3.amazonaws.com/temp/HNcC%20%282%29/index.html I checked the python script and didnt see anything that would potentially change file headers or do something more complex but I might be missing something. here are the requests that i am seeing https://www.dropbox.com/s/auv58wptquae17h/2020-01-06_16-34-09.png?dl=0 Thanks!
Qdev 18 days ago
i have a thought that the range header will need to be set in the client to fetch the right next range of the file?
https://www.dropbox.com/s/3km7mobvf13inlk/2020-01-06_17-14-58.png?dl=0
Qdev 18 days ago

n
\n@media print {
\n html, body {
\n overflow: hidden;
\n }
\n}
\n<\/code><\/p>\n

View Timeline