FOIT font loading
To prevent text on your website showing the default fonts which the font-face is loading, this is how you do it. We basically hide the <body> of the page until…
To prevent text on your website showing the default fonts which the font-face is loading, this is how you do it. We basically hide the <body> of the page until…
This is to stop a stuttered appearance of background images. The image will only show once it's fully loaded. <!-- html --> <section id="frontPageFirstSectionContainer"> <section> <script> /* This makes sure…
https://stackoverflow.com/questions/9790347/set-an-image-object-as-a-div-background-image-using-javascript var imgSrcs = [...]; // array of URLs var myImages = [], img; for (var i = 0; i < 4; i++) { img = new Image(); img.onload =…
I got this code from somewhere on the internet but can't find a reference for it. If you created the code I'll be happy to add a link. Thank you…
<body class="theSite"> <header>Header goes here</header> <main class="content">Main context of site here</main> <footer>Footer goes here</footer> </body> ... and the css .theSite { display: flex; min-height: 100vh; flex-direction: column; } .content {…
Sometimes it's nice to display an image, as a preview before it's uploaded, or you might want to display an image for some other reason. For this purpose we use…
The idea here is that there is an image placement container with a gray background. Only when the image is loaded will it show. This prevents a 'stuttered' appearance as…