javascript - Is there a way to html elements appear with css styling from the very beggining that they load onto the page?

Question

When i create a html page with various different css style sheets as the page loads i notice that not all styles load immediately. This creates a kind of 'snap to final style' where items change font size and positioning , which looks a little bit unprofessional.

Does anyone know how to make items only appear untill the styles are applied? Thank you.

标签： javascripthtmlcss

Answer 1

There are various things you can try, but they all rely on CSS, so there is no perfect solution. However, you could apply local styles to initially hide the page contents behind a modal layer and then after the load event happens (which is when all the external references have completed downloading), the model layer is removed. Here's an example, however it will run immediately because there aren't any external resources to wait for.

EDIT: I've added a link to a high resolution image that should add at least a couple of seconds delay in the example below.

window.addEventListener("load", function(){
  // Now that the document is fully loaded (and your external
  // CSS can be applied), you can remove the modal
  document.querySelector(".modal").classList.add("hidden");
});

.modal { position:absolute; top:0; left:0; height:100vh; width:100vw; background-color:grey; }
.hidden { display:none; }

<div class="modal"></div>
<img src="https://photojournal.jpl.nasa.gov/tiff/PIA02562.tif">
<div>Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit Lorem Ipsum doles anit </div>