0
220
ViewsHow to hide a loading screen when total blocking time is done?
Issue
I have a loading screen used to fill time while a <div> is idling and I want it to disappear after the total blocking time (TBT) is done. I am new to front-end development and not 100% on how to do this.
Failed solutions
My loading screen is required when the user clicks on the builder section. Both the loading screen and builder sections are loaded with the document and are hidden using .hide() and then shown using .fadeIn().
I have tried using the .load() and .on("load", function(){}) jQuery methods like so:
// 'build' is a var declared as $('.build-container');
$(build).ready(function() {
console.log("Build is loaded");
hideLoadingScreen();
});
But the issue with this is that build is loaded with the document, not when the user clicks the build button on the navbar and after some research, I found that it isn't possible to lazy load an element if it is in the HTML file.
Below is a screenshot of the TBT time, is there a jQuery way to .hide() after the this is completed?
1 answers
Answer question0
I think you can change with the following
$(build).ready(function() {
console.log("Build is loaded");
hideLoadingScreen();
})
// NEW
build.ready(function() {
console.log("Build is loaded");
hideLoadingScreen();
})
Because build is already defined as a JQuery result variable (// 'build' is a var declared as $('.build-container');). I let you try it :)