Is there a way to not load html until JavaScript loads?

Question

I want to make sure that all JavaScript happens before the page is loaded. I am changing some innerhtml, but don't want the original innerhtml to show.

Currently, when my page loads "Books" is displayed for a brief moment, then finally when the script is read, it gets replaced. How do I prevent it from displaying the initial text?

FYI the script exists inside a php file.

<?php
?>
<script>
function changeme(){
var myvar = "test-string-is-long-to-notice-the-changed-text";
var spans = document.getElementsByTagName("span");
for(var i=0;i<spans.length; i++) {
if(spans[i].textContent.trim().toLowerCase()==="books") {       //is this the "Welcome" span?
spans[i].innerHTML = myvar;  //change to new value
break;                                  //hop out of the loop, we're done
}
 }
 }
 window.onload = function() {
 changeme();
 };
</script>

If the default content of a page is always going to be changed once the page has been loaded, then you need to reconsider changing your default content, rather than changing it dynamically every time. The notion being that your default display should be what you expect your page to show as. Anything extra should be a result of user interactions or the application of plugins. But not a whole sell, always change X to Y on page load. Just start out with Y and don't force your users to do that processing. — Taplar
– Taplar, Commented Oct 29, 2018 at 20:08

halfer · Accepted Answer · 2019-04-28 00:24:20Z

1

It is not a good idea to load JS before HTML, because you can not change the HTML elements before loading it using js.

Solution 1: Initially, keep the html tags empty that you do not want to show, because you want to show new data from JS.

Solution 2: Initially, keep the styles for those elements "display: none" and when you add the data using Js in element. Update the style to display: 'block' or any other you want, eg spans[i].style.display = 'block';.

edited Apr 28, 2019 at 0:24

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Oct 29, 2018 at 19:42

Ankush Sharma

6773 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MaduKan Over a year ago

Solution 2 looks better to me. That way its less change to your current application. For example have two Dom elements (lets say two DIV s) one dedicated to your "Books" having the style.display="none". This has to happen at the very beginning in your CSS and should not be overridden. Perhaps set that to the Id of the element. Then on load complete of the page, right at the end of loading, you can change the display to "block" to show the final set of elements. While all this is going on, for a better user experience, show a "loading..." DIV element to the user.

Keith Cronin · Accepted Answer · 2018-10-29 20:08:03Z

0

You cant apply JS to a html document that doesnt yet exist. Your html is always loaded first, then your JS is applied. What you could be seeing here is the html is loaded and the JS is taking like what--a second to load and make the change? I recommend figuring out a more efficient way to implement the JS you need. You could just be seeing JS latency. You could use a more efficient implementation plus some CSS to fix it. I could be wrong here but it just doesn't make sense to apply JS to html went the html isnt even there yet.

How would I apply any JS to that if I'm trying to do it before the browser has even parsed and rendered my html?

Also remember that PHP is always "loaded" first, then html, then JS

edited Oct 29, 2018 at 20:08

answered Oct 29, 2018 at 19:46

Keith Cronin

3812 silver badges10 bronze badges

Collectives™ on Stack Overflow

Is there a way to not load html until JavaScript loads?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related