I have a webpage that's pretty intensive via HTML and CSS, which leads to some elements loading faster then others when a user visits the page. The background may take awhile to load, and so on... It gets pretty ugly seeing it all load element by element...
So I'm wondering how I can first load a different page (page1, that has simply a gif and bare minimals of html) and then page2 (page with intensive html) will appear only after the client's browser has fetched all of the pages html.
I believe this can be done with JQuery, which I know almost nothing about...
Any advice would be appreciated,Thanks,
Best Answer
Use the following HTML (at the top of the body is best):
<div id="loading"></div>And this CSS:
#loading {background: url('spinner.gif') no-repeat center center;position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 9999999;}And the following JavaScript (uses jQuery):
function hideLoader() {$('#loading').hide();}$(window).ready(hideLoader);// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loadingsetTimeout(hideLoader, 20 * 1000);You could put the styles inline on the div instead of in a stylesheet for less chance of a flash of content before the loader. Also, you could use https://www.askapache.com/online-tools/base64-image-converter/ or a similar tool to convert your GIF to a base 64 URI, and use that instead of spinner.gif.
<div id="overlay"></div><style>#overlay {position: fixed;background: rgba(0,0,0,0.8);width: 100%;height: 100%;top: 0;left: 0;}.hide {display: none;}</style><script>$(window).load(function() {$('#overlay').addClass('hide');});</script>I have implemented in Laravel and it worked as expected,
<style>.loader {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;background-color: #ffffffcf;}.loader img{position: relative;left: 40%;top: 40%;}</style><div class="loader" ><img src="{{asset('public/img/loader.gif')}}"></div><script>window.onload = function() {//display loader on page load $('.loader').fadeOut();}</script>