Looking to display a progress bar or loading popup on my web page until it is fully loaded.
The page is quite heavy due to the presence of an HTML editor using jQuery, which takes significant time to load. During this loading period, I want to have a progress bar visible that will disappear once the entire page has finished loading.
Not sure how to display a progress bar.
However, it's simple to show a loading popup using the jQuery BlockUI Plugin
Just include jQuery and the BlockUi Plugin in the head tag.
You can do something like this.
$(document).ready(function() {
// block the page
$.blockUI();
// load your editor here
// unblock the page after loading completes
$.unblockUI();
});
It's even better if you're using a tool like CKEditor, as you can unblock the page after the load completes callback of the ckeditor.
Here's a brief example with the page being blocked for 10 seconds. You can adjust the timing in your callback. ( Example Here )
To handle a list of resources (javascript files), you can utilize the following approach:
var loadedResources = 0;
var deferreds = [];
var resList = [ 'res1.js', 'res2.js' ];
$.each(resList, function(index, res) {
var load = $.ajax({
type: "GET",
url: res,
dataType: "script"
}).then(function() {
loadedResources += 1;
//Update progress bar logic here
//Utilize 'loadedResources' and 'resList.length'
//to determine progress bar width
});
deferreds.push(load);
});
$.when.apply(this, deferreds).then(function() {
//Hide or remove progress bar upon loading of all resources
});
The progress bar is updated each time a resource is successfully loaded. Once all resources are loaded, the progress bar can be hidden.
$.when.apply() consolidates the deferred objects into one central deferred. Completion of this central deferred signifies completion of all contained deferreds as well.
Additionally, images or other content types can be included in the resource list, with necessary modifications to loading methods for specific resource types. Refer to this link for details.
For further insights on Deferred Objects, refer to this source.
Edit: Note that observing progress requires multiple resources in the list, not just one.
I'm currently working on integrating a confirmation modal within a dialog box that includes form input fields. The purpose is to alert the user when they try to exit without saving their changes. The modal should appear every time the user modifies th ...
Greetings! My objective is to create a material progress bar with the fraction displayed at the top of the percentage. https://i.sstatic.net/GbphJ.png Currently, I have managed to show the fraction at the beginning of the percentage. Below is the code sn ...
Currently, I am attempting to utilize jQuery to delete a file and display a warning message indicating which specific file is about to be deleted. However, when I click on the file labeled Orange, the warning message appears as expected, while clicking on ...
Using jquery .ajax() for sending and receiving data through JSON works smoothly on all browsers, except for "Windows XP" Firefox. The .ajax() function sends data without any errors, and there are no error messages returned from JSON either. I suspect the ...
When viewed in IE 11 with CSS properties applied After disabling the display property, the result changes as shown below In the first screenshot, the icon is present but not visible. I want to keep the display:table-cell property for responsiveness. Can ...
https://i.sstatic.net/I5vKT.png What is the correct way to reference it in XHTML? I have seen conflicting information online - some say the file should be placed as shown in the image above, while others mention needing to map resources in servlet-config. ...
For my ASP.NET website, I am utilizing Form Authentication and need to verify the user's authentication status before initiating a callback on the client-side. What is the best way to accomplish this using JavaScript/jQuery? ...
I am currently working with a table that has the id "mytable" and contains numerous rows... My goal is to use jQuery to select a specific row with the id "row_100" in this table... How can this be accomplished? Here is the code snippet: function highli ...
var data = [ { "name":"john", "description":"im 22", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c7d7e7f0c2b212d2520622f">[email protected]</a>" }, { "name":"jessie", ...
I am currently in the process of creating a version of "the 15 game" using jQuery in HTML. You can find more information about the game on this page. The objective of the game is to rearrange a table of "boxes" in ascending order from 1 to 15. Below is th ...
Objective: To develop a Q&A Script using PHP, JavaScript, and jQuery that allows users to post questions and provide answers. Upon submitting a new answer, it should be stored in the database and automatically displayed in the answers section. Challenge: ...
I am attempting to access a child of the div with the class form-group, specifically, I want to display the value of the input element. <div class="form-group"> <label>text</label> <input name="text" type="text" class="form-co ...
I am facing a major issue. I need to be able to select multiple values from a drop down list, so I implemented bootstrap-multiselect.js. However, I encountered the following error: angularjs.js:107 TypeError: a.forEach is not a function at u.writeValu ...
I am working on setting up a database and login form, and I need to create a PHP script to validate the login credentials. What are the different types of data access and how can they be utilized? Specifically, how do I retrieve user input from elements ...
I'm struggling to figure out how to pass the blog title into the data field of my ajax call. I've been searching for beginner tutorials on SQL, PHP, and AJAX, but haven't found anything that clarifies this issue. If anyone knows of any usefu ...
As I delve into the world of Ajax/jQuery, my current focus is on setting up a test environment for the following scenario: The server needs to recursively copy an entire folder from one location to another. The client should then display the list of copi ...
Would it be possible to detect a specific area within an image using a predefined set of image offsets? Here is the image and accompanying offsets: Sample Image Below are the sample image offsets for the highlighted area: Offset(63.4, 195.2) Offset(97.7 ...
Is there a way to position the a element at the top and the button at the bottom, using only flex properties without absolute or fixed positioning? Currently, the button is at the bottom but the title is not at the top: .all { display: flex; hei ...
I attempted to send a value to a modal by following the instructions on the Bootstrap documentation here. However, I am facing an issue where the data is not being successfully passed. To trigger the modal, use the following button: <button type=" ...
Resolved: With the help of @Sajeetharan, it was pinpointed that the function GenerateRef was faulty and causing the issue. Although this is a common query, I have not had success in resolving my problem with displaying {{}} to show the outcome. I am atte ...