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 -

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 2 years 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:

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 - 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 Thanks!
Qdev 2 years 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?
Qdev 2 years ago

\n@media print {
\n html, body {
\n overflow: hidden;
\n }

View Timeline