How can a "Loading" message be displayed while external JavaScript is loading?

I have mastered the art of using JS or jQuery to showcase a "Loading" message during the loading process. Currently, I am working on a sizeable web application that relies on various JS dependencies, and I am seeking a way to exhibit a "loading" message while all the scripts are being loaded.

Within my head tag, there exists several <script src=…> tags, and my goal is to promptly display a loading message as soon as the user lands on the page. Subsequently, this message should be removed once all the scripts have finished loading.

What would be the most effective approach to achieve this seamless loading experience?

javascript

Answer №1

To download the javascript files, utilize the $ajax function from jQuery and then append a script element to the head tag after the download is finished.

For example:

// Show loading message here

$ajax("javascriptfile.js", function(file){

  // Insert downloaded file into the head tag

});

Answer №2

If you're looking to implement lazy loading of scripts, one approach is to use the YUI library as shown in the example below:

var HelloWorld = {
    is_loaded: false,
    lazyLoad: function(callback) {
        var loader = new YAHOO.util.YUILoader();
        loader.addModule({
            name: "helloworld",
            type: "js",
            fullpath: "yui_ex/helloworld.js"
        });
        loader.require("helloworld");
        if (callback) {
            loader.onSuccess = callback;
        }
        loader.insert();
    },
    sayIt: function() {
        var args = arguments;
        HelloWorld.lazyLoad(function() { HelloWorld.sayIt.apply(HelloWorld, args); });
    }
};

Additionally, you can explore other options such as using JQuery's $.getScript() method or refer to this link for an alternative example.

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

NextRouter does not have a property called "refresh"

Here is the provided code snippet: "use client"; import { useRouter } from "next/router"; import { useState } from "react"; export default function CreatePrompt() { const [title, setTitle] = useState(""); const ...

javascriptreactjstypescriptnext.js

Waiting for content to load in Angular's UI-Router

Working with UI-Router in Angular 1.7, I am facing an issue wherein I want to change the state and wait for the content to load before scrolling to the bottom of the page. // Using a class method onCreate() { this.post().then(response => { ...

javascriptangularjsdomroutesangular-ui-router

Tips on updating content at a specific time without the need to refresh the page

I'm working on a digital signage script that needs to be time scheduled. I was able to accomplish this using JavaScript and refreshing the page every 15 minutes. However, my question is, how can I track the time and update the content at specific hour ...

javascriptjqueryajax

Node.js Friendship NetworkIncorporating Friendships in Node

Currently, I have successfully set up a real-time chat application using node.js and socket.io. My next goal is to allow users to create accounts, search for other users by username, and send friend requests to start chatting. I have tried searching onlin ...

javascriptnode.jsexpresssocket.iochat

Is there a way to utilize the revealing prototype pattern in JavaScript to namespace functions stored within prototypes?

Currently implementing the Revealing Prototype Pattern, I have integrated two distinct prototypes within a single JavaScript file. Here are some articles that shed light on this topic: , . My assumption was that these prototypes would function like atomic ...

javascriptjquerydesign-patternsnamespacesprototype

Variable Returned by AJAX

I am attempting to send a variable using a select box via POST method, then use AJAX to submit the data and finally leverage that variable on the original page to update SQL queries. Below is the code snippet I currently have: <script type="text/j ...

javascriptphpjqueryajaxhtml

Accessing Private Files with Signed URLs from AWS S3

Issue: The challenge is to securely allow users to upload a file and retrieve it later. The files are stored in private Buckets and objects using S3 pre-signed URLs for uploading. However, fetching the file poses a problem as the signed URLs expire after ...

javascriptamazon-web-servicesamazon-s3

Enhance your website with unique and custom fonts using

I am utilizing this repository. How can I incorporate custom fonts into my project? I have created a folder named "fonts" within the assets directory and placed my fonts there. fonts.scss @font-face { font-family: 'Lato'; src: url('../ ...

javascriptangularsasswebpack

The argument labeled as 'State' cannot be assigned to a parameter labeled as 'never'

I've recently delved into using TypeScript with React. I attempted to incorporate it with the React useReducer hook, but I hit a roadblock due to an unusual error. Below is my code snippet: export interface ContractObj { company: string; ...

javascriptreactjstypescriptreact-hooks

What is the best way to include numerous attributes to an element using JavaScript?

Attributes can be included within a string in the following format: let attr = ' min="0" step="5" max="100" '; or let attr = ' min="2019-12-25T19:30" '; and so on. Is there a function available ...

javascript

The AJAX request fails to trigger following the onbeforeunload event except when the page is manually refreshed

I'm currently working on implementing a solution for handling the onbeforeunload event to display a custom message when the user tries to close the browser tab. I want a prompt like: Are you sure you want to leave this page? (I don't want to use ...

javascriptjqueryajax

What is the necessity of explicitly requesting certain core modules in Node.js?

The documentation explains that certain core modules are included in the Node.js platform itself and are specified within the source code. The terminology can get a bit confusing when it comes to details. The term "global objects" (or standard built-in obj ...

javascriptnode.jsglobal-variables

What is the most effective method to retrieve the UserName using Javascript?

Can someone please explain to me the difference between using session["user"].name and session["user:name"]? // I don't understand why we have to put the user session into the JavaScript global space :( var session = { user: { "Id":"d675c ...

javascriptjson

Exploring the power of Javascript for number lookup

I am currently working on a coding project using TypeScript and JavaScript to locate a specific number provided by the user within a list. The goal is to display whether or not the number is present in the list when the 'search' button is pressed ...

javascripthtmltypescript

Achieving dynamic HTML element addition through JavaScript while maintaining their record in PHP

There is an input box where the user specifies the number of new DIV elements to be added dynamically. This request is then sent to PHP via Ajax, where it prepares an HTML DIV with some inner input tags. Each DIV has a unique id attribute generated increme ...

javascriptphpjqueryhtmldynamic

Showing the loading screen while waiting for the static Next.js app to load

Looking for a way to implement a loading screen right before the entire static page finishes loading? I'm currently utilizing modules:export to create my static page, but struggling to listen to the window load event since NextJs has already loaded th ...

javascriptnext.js

Obtaining template attributes in CKEditor: A guide

I have been working with the template plugin in CKEditor to load predefined templates. Each template is defined as follows: templates: [ { title: "Quickclick 1", image: "template1.png", description: "Quickclick 1 template", html_et: "& ...

javascripthtmlckeditorwysiwyg

Guide on adding user input values (type=text) into HTML using JavaScript function outcome

I'm looking for a way to use the output of a JavaScript function as the value for an input field in HTML. Currently, I have a JavaScript function that generates a random string: function generateRandomString(length) { let result = ''; ...

javascripthtmlinput

update angular component after deleting an item

After deleting a contact in the table, I'm trying to refresh my contact list page but it's not working. Any suggestions? This is the list of contacts in the contact.component.ts file Swal.fire({ title: 'Do you want to delete this contac ...

javascriptangular

Toggle the image and update the corresponding value in the MySQL database upon clicking

Looking to implement a feature that allows users to bookmark pages in my PHP application using JavaScript. The concept involves having a list of items, each accompanied by an image (potentially an empty star). When a user clicks on the image, it will upda ...

phpjavascriptmysqlajax