I would like to show pdf files in my web app, PDFJS is working fine but I would like to load the pages on scrolling. I found PDFJS supports rendering on loading. I dont want to load whole document at a time. user clicks on next page get next page data and render.
I would like show pages on request?
How to render pages on request using PDFJS?
Related
I am building my ReactJS SPA (single-page-application) webpage that includes a file upload function. Sometimes users need to upload a large file (over 5 GB) and it can easily take up above 20 or 30 minutes.
Currently, an upload is achieved by HTTP PUT request, and when the user uploads a file in the /new-files page, a UI box component will appear, showing the progress bar for the upload process.
While the file is uploading, I want the users to be able to:
Go to other pages (i am using react-router-dom), thus loading other components;
browser refresh/ reload the page;
and when the user comes back to /new-files page or when the page reload finishes, the user can still see the upload in progress.
Right now, when I refresh the page, it kills the PUT request that is doing the file upload.
How can I make the file upload with PUT request survive over functional component reload or page reload?
Is it even possible?
Maybe it is not possible for file upload with PUT request to survive over manual page refresh.
But I think it is possible to let users be able to click open other page components and come back to the file-upload page and still see the progress bar continuing.
Any suggestions?
I have a little perfomance issue with a web application I am using and I would like to know how can I solve it.
You see, when I enter to my web application, everything starts loading and takes some time since the application make some requests to a database to retrieve some data. I would like to know if I can put an iframe on a blank page with the link to my application so it can start loading inside the iframe making the rest of the page work and not getting stuck.
I've tried adding a XmlHttpRequest on a blank page requesting the web application link but it onlys retrieves the first elements that loads instantly but stops there. It doesn't get all the elements loaded before the first moment since they have some delay to appear because of the database request the web application makes.
How you guys think that I can load my web application inside another page and while my web application loads, I can still use the rest of the other page without everything getting stuck?
I hope you guys could guide me a little bit. Thank you in advance!
I've solved this by adding an invisible iframe that loads the page I need on the background and on the front I retreive everything with my application. Once I finish, I just delete the iframe on the background and move to the next task.
I researched a lot on how to measure the page load times in a single page application like React, Vue etc but did not get any proper answer.
In Websites that are built using Single Page Application frameworks/libraries like vue, react etc load the initial page only once and then all the route changes do not fire a page load. To understand it better let us say our landing page is /index. When index route is loaded it is considered a Page Load but when we change the route to let's say /index/products here SPA takes care of it and loads the content using AJAX without loading the page.
But in websites that are built without SPA frameworks the case is different it loads every page on route changes and we can run the below line of code on each page and get the performance metrics.
performance.getEntriesByName(window.location.href)
This line of code simply returns a dataset containing some information about the page load speeds as shown in the image below.
So in SPA it runs only once and not when we change the routes. So what I want to do here is that I need to make this line run on every route change so that I get the above performance metrics that are shown in the image for every page.
Right now it only runs for the main page and when I change the routes inside the website, it does not run for every page. But in the case of reload it works properly because reload is again a new page load.
I have a Chrome extension that used to run a background script that would call an API for a website using the users session or cookie.
It'd simply perform a get request and then pull various image URLs from the page using Cheerio.
The owners of the site though have now changed how the pages work. On load, they call a JSON API, and the source of the page uses JavaScript to render the page.
The issues I have now is that when I call a get request, it simply gets the page source, rather than the rendered HTML.
Does anyone know how I can get the rendered HTML? I'd rather not open a tab with the page in chrome, grab the data with a content script and then close it (automatically of course) as there are hundreds of pages to go through, and that's quite intensive on CPU resources
I have a website that uses hashes for navigation, so it just uses javascript/ajax to load new pages in. Of course the one file, index.php loads when you load the page, then everything else is controlled via javascript. I'm now using an iFrame to upload photos, the problem is that it seems like when I click on links to go to other pages (while the iframe upload the files, since it is on the index.php page so it's not affected by switching pages) it just waits and I think it waits until the file upload is complete to load the new page I have requested. I have seen websites that do this though, my initial thought is that it could just be this: They use another server to store their files on, aside from the one the website is hosted on, therefore if it's that reason it doesn't take all the bandwidth and resources from each other. would this be the case?