Many DOM elements are included in the created Web site page and the page is slow to display. In addition, there are symptoms such as JavaScript re-layout collapsing.
How do I keep the page from being displayed until all the elements have been loaded, but when all the elements have been loaded?
javascript css html5 jquery
As for the js part, it is written in the same way as jQuery.
$(function(){//window.load equivalent, called after DOM initialization
$('#loading').fadeOut(300);
$('#loaded').fadeIn(300);
});
I think it would be smarter to write like this.
It's not a big supplement, but while you're pointing it out.
If you just put the div side by side, you will see both loading and loaded as follows.
position: absolute and so on.
In this case, it is not a problem to hide the loaded one. If you want to place buttons, you will need to make them inoperable.
Also,
$(function(){
});
is true after analysis of the DOM, but it is the same as $( document).ready(function(){}, and the event is earlier than window.onload after all loading.
For example, the difference is whether or not the image has been loaded.
Therefore, the window.onload=loaded() part is
$(window).load(function(){
$("#loading").fadeOut(300);
$("#loaded").fadeIn(300);
});
If you do not write , it will not be the same as the original code.
Code included inside $( document).ready()will only run once the page Document Object Model(DOM) is ready for JavaScript code to execute.Code included inside $(window).load(function(){...})will run once the entry page(images or iframes), just the next.
The code written in $(document).ready() runs when the DOM on the page is ready to run javascript.$(window).load(function(){...}) runs when the entire page (including images and iframes) is ready, not DOM.
and
Experienced developers some times use the shorthand$() for $( document).ready().
Experienced technicians may use $(document).ready() as a simplified notation for $().
HTML side
<body>
<divid="loading">
<!--Loading View-->
</div>
<divid="loaded">
<!--View after loading -->
</div>
</body>
and
on the CSS.#loaded {display:none;}
It is attached .Consequently, only the loading is displayed first. On the JavaScript side,
window.onload=loaded(); // Call loaded() when the page is loaded.
function loaded() {// function called upon page read completion
$("#loading").fadeOut(300); // Load screen(#loading) fade out at 300 ms.
$("#loaded").fadeIn(300); // fade-in the screen (#loaded) to be displayed after loading is completed over 300 ms.
}
The example uses jQuery's fadeOut() and fadeIn(), but can also be implemented using hide() and show(), respectively.
© 2024 OneMinuteCode. All rights reserved.