Developing a JavaScript-based PDF loading animation

My website includes an embedded PDF file that sometimes takes a while to load, resulting in a blank screen for the user. I want to implement a preloader image, such as "LOADING...", while the PDF downloads in the background.

Here is the code snippet I am using:

document.getElementById("bigone").innerHTML = 
'<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>';

I tried using the Image object in JS for the preloader but ran into issues:

document.getElementById("bigone").innerHTML = '<img src="gradients\\loading.png" />'
var pdf = new Image();
pdf.src = "\\PDF\\somefile.pdf";
pdf.onLoad = function() {
    document.getElementById("bigone").innerHTML = '<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>';
}

Unfortunately, this approach didn't work as expected. The preloader image appears but isn't replaced with the embedded PDF. I even checked pdf.onload inside an alert and it returned null. Any suggestions or corrections to my code would be greatly appreciated. Thank you.

javascriptpdfpreloader

Answer №1

You cannot load a PDF file into an Image object because the Image object is specifically designed for images.

My suggestion would be to create a table cell in the HTML that serves as a container for the PDF file within an OBJECT element.

By setting the background-image style attribute to a loading picture, users will see the "loading" image while the PDF is loading. Once the PDF has fully loaded, it will appear on top of the loading image, hiding it from view.

<td id="bigone">
    <div id="pdf_container" style="background-image: url('\\gradients\\loading.png'); background-repeat: none; background-position: 50% 50%; height: 720px; width: 100%;">
    </div>
</td>

<script type="text/javascript">
    document.getElementById("pdf_container").innerHTML = '<object type="application/pdf" data="\\PDF\\somefile.pdf" width=100% height="720px"></object>';
</script>

Another option would be to apply the background-image directly to the table cell instead of creating a new DIV element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click the add button to include an identical form element below, with the help of Angular Js

Looking for assistance with implementing a feature in Angular Js. I have two forms, form1 and form2, and an add button. On clicking the add button, I want to dynamically add form2 below form1. Any help from experienced Angular Js developers would be greatl ...

javascripthtmlangularjsformsdynamic-forms

Checking email existence through remote jQuery validation

Utilizing the jQuery validator plugin, I am implementing an ajax function with a remote method to validate whether an email already exists in my database. However, I am encountering an error when making the ajax call within my validation function. "email ...

javascriptphpjqueryajaxlaravel-5.4

Obtain an array containing both matching and non-matching elements

I'm looking to separate a string into an array made up of consecutive substrings, alternating between matches and non-matches of a specified regular expression. Here's an example: [nonmatch, match, nonmatch, match...] For instance, using the c ...

javascriptarraysregex

Encountering issues with running `npm start` following the creation of a fresh React project using create

Encountering an issue with react-scripts after setting up a new react project. I initiated the project using npx create-react-app dashboard. Upon entering the dashboard directory and executing npm start (without any prior actions), the following error is d ...

javascriptnode.jsnpmcreate-react-appreact-scripts

Using the Proper 'this' Reference Without Repeating 'this' in Nested Functions

I am facing an issue in my class where I have multiple methods and properties. One of these methods contains a setTimeout() function as follows: function myClass() { this.some_property = "test"; this.PrintOnTimeout = function() { // I thou ...

javascriptnode.js

Ensure every individual input field in a Bootstrap form is validated using JavaScript before submitting the form

As a newcomer to Javascript, I am seeking assistance with validating each field in the form below without having to click on the submit button. Your help is greatly appreciated! <form action="" id = "form1" class = "form-group row"> & ...

javascripthtmlbootstrap-4

Verify whether the CSS class is updated upon clicking a Tab

I am currently utilizing the Tab feature from Semantic UI for a table header. Upon inspecting it in Developer tools, I noticed that the selected tab contains an additional element active besides its regular class elements. Here is the code snippet: const ...

javascripthtmlcssreactjssemantic-ui

Placing miniature vessels within a larger vessel, where two small containers fit on one level of the larger container (refer to images)

I am looking for a way for users to input text in the "your text" container and then click "add". This action should create a new container within the larger red-lined container with the information provided by the user. I know how to do this already, but ...

javascriptjqueryangularjs

What are the most optimal configurations for tsconfig.json in conjunction with node.js modules?

Presently, I have 2 files located in "./src": index.ts and setConfig.ts. Both of these files import 'fs' and 'path' as follows: const fs = require('fs'); const path = require('path'); ...and this is causing TypeScr ...

javascriptnode.jstypescriptnode-modulescommonjs

"Transforming a jQuery UI dialog into a Bootstrap modal: A step-by-step guide

How can I transform this element into a Boostrap UI jQuery object? <div id="dialogDeleteDefaultVariant" title="default"> <p><span style="margin: 0 7px 20px 0;"></span>' . HTML::button('dialog_delete_default_variant_des ...

javascriptjquerybootstrap-4

Exit out of parent window when iframe button is clicked

I am facing a dilemma with an iframe that lacks an ID as it is generated by a third party. This iframe is present on a landing page. My objective is to close the window or landing page when the submit button within the iframe is clicked, which results in o ...

javascriptjqueryhtmliframe

Error: Attempting to assign a value to a property of #<Object> that is read-only

I'm working on a task management application and encountering an issue when trying to assign an array of tasks stored in localStorage to an array named todayTasks. The error message being thrown is causing some disruption. https://i.sstatic.net/uFKWR. ...

javascriptjsonlocal-storage

Issue: Attempting to establish a connection to an SFTP server using ssh2-sftp-client within an AWS lambda function results in a timeout error

My current task involves establishing a connection to an SFTP-Server in order to list the documents located within the /ARCHIVE Folder. The necessary credentials are securely stored in a .env file. Surprisingly, this code runs without issue on my local mac ...

javascriptnode.jsaws-lambdasftpssh2-sftp-client

Unfulfilled peer dependencies in Npm

Recently, I've been delving into the world of Node and npm. I'm currently in the process of setting up a react native application and I've come across a situation that has me stumped. Let's say I need to install two packages: Package ...

javascriptnode.jsreactjsnpmreact-native

Categorize JQuery Selectors based on the type of elements they

Is there a way to automatically group results by type when using the .each function in JQuery? Consider the example below: $(selector).each(function () { //do stuff here for each found }); The code above goes through each element individually, but ...

javascriptjqueryeach

Limit access to the server in Node.js by allowing loading only if the request is coming from another page and form POST variables are present

After searching for documentation without success, I have a question: Is there a way to prevent users from directly accessing my node.js server at website.com:3000? Currently, when a user visits my node.js website, it crashes the whole server and takes i ...

javascriptphpnode.jsexpress

What is the best way to implement states for checkbox Booleans within a todo list, allowing users to easily add or remove items as needed?

Currently, I have set up a todo list feature on my website where users can add and remove items. The goal is to allow them to also check or uncheck items as needed. While the functionality to add or delete items is working smoothly and the checkboxes upda ...

javascriptreactjscheckbox

The color of my Navbar remains stationary despite implementing Javascript for scroll effects

I am having trouble with the Javascript portion of my code, which I copied from a tutorial. The Navbar is not changing color when scrolled, and I'm not sure if the issue lies with the Javascript, the CSS, or if I need to add 'scrolled' to th ...

javascripthtmlcssbootstrap-4navbar

What is preventing me from sending a POST request to my Node.js Express server?

Currently, my goal is to develop a straightforward user registration system. I simply wish to register through the HTML form and then be able to log it in the server using console.log. However, when attempting to achieve this with fetch, I encountered the ...

javascripthtmlnode.jsexpress

Strategies for efficiently retrieving delayed ajax data to display in a Rails view

When working with an API action that takes around 10 seconds to retrieve data, I typically use an alert to ensure the data is successfully fetched. However, my main concern is how to effectively transmit this data to a Rails view for displaying purposes. B ...

javascriptruby-on-railsajaxview