Loading screen while all files and audio are being loaded

Question

Loading screen while all files and audio are being loaded

My JavaScript code is responsible for displaying and playing audio on my website.

Unfortunately, the load time of the page is quite slow. To address this issue, I decided to follow a tutorial on installing a preloader, which can be found at .

Although I managed to get the preloaded image to show up, it disappears long before the entire page finishes loading. I've experimented with using both $(window).load and $(document).ready in my code, but neither approach keeps the preloaded image visible until the JavaScript and audio have finished loading.

Here's a snippet of the code:

<!DOCTYPE html>
<html>
... (omitted for brevity)
</html>

javascript jquery html css image-preloader

Answer 1

Answer №1

When you make a call to your init() function simultaneous to calling your loader disappearing function

<body onload="init();"

and

$(window).load(function() {} / or window.onload = function() {}

essentially mean the same thing but with different names.

It is recommended to remove init() from the onload tag and place it elsewhere in your script, outside of any onload events.

Answer 2

When you make a call to your init() function simultaneous to calling your loader disappearing function

<body onload="init();"

and

$(window).load(function() {} / or window.onload = function() {}

essentially mean the same thing but with different names.

It is recommended to remove init() from the onload tag and place it elsewhere in your script, outside of any onload events.

Loading screen while all files and audio are being loaded

Answer №1

Similar questions

I have created a Joomla Template that incorporates my own CSS through JavaScript. Is there a method to include a distinct version tag to my custom CSS file, such as custom.css?20180101?

Guide the user to a specific website and replicate the user's action of pressing the down arrow or clicking a button three consecutive times

Utilizing dynamic meta tags in React JS with a PHP backend and Redux integration

Error Encountered When Updating cGridView in Yii: "TypeError: $.fn.yiiGridView is undefined"

Solving the right-to-left orientation issue in the Bootstrap navbar

Click on the dropdown item in the Bootstrap btn-group dropdown

Error: The jQuery Class is returning an undefined value

Attempting to transform HTML code received from the server into an image, but encountering an error while using ReactJS

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Sharing a document that contains a linked image file using a relative path through the `publish` feature

Problem with loading image from local path in Angular 7

Adjust the width of the unordered list to match the width of its widest child element

Displaying success and failure messages on a modal window using Ajax in PHP form

Guide: How to include a date value within a JSON format? [See code snippet below]

``The Dynamic Checkbox Selection Process using Ajax, Jquery, and PHP

Identifying identical web elements using Python Selenium through related attributes

Utilize dynamic Google Maps markers in Angular by incorporating HTTP requests

What is the process for inserting an image into a table using el-table and el-table-column components in Vue.js while utilizing ui-elements?

Switching effortlessly between Fixed and Relative positioning

Error in IONIC 3: The code is unable to read the 'nativeElement' property due to an undefined value, resulting in a TypeError