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 3 months ago
3 months 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 3 months 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 3 months ago

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

View Timeline