Categories
tech

Loading looking ahead to the loading of the web page

Many websites use a display screen of “loading” (or preloading), which is proven instantly on the time of the outlet of the internet web page whilst looking ahead to the true content material of the record to be loaded for all the. In this manner it’s have shyed away from to turn to the person the internet web page is “loading” with lacking parts and with a format incomplete.

It is, after all, is an insignificant stylistic selection with none end result on the proper operation of the internet web page.

In this text I will be able to display you a script in a position to make use of that permits you to create a scermata loading which is superimposed with a transparency impact, on the true content material of the internet web page whilst they’re nonetheless being downloaded by way of the browser.

Continues after the commercial…

In different phrases: when you go surfing to the internet web page is displayed instantly at the display screen of “loading” which is able to routinely disappear once all the contenutoi of the web page might be statio downloaded by way of the browser.

The very first thing we see is the Javascript code that we can insert within the header of the web page, between the tags <head> and </head>:

the <script>
(serve as(){ if (window.addEventListener)
{ window.addEventListener("load", nascondi_loading_screen, false); }else{ window.attachEvent("onload", nascondi_loading_screen);
}
})();
serve as nascondi_loading_screen()
{ record.getElementById("loading_screen").taste.show = 'none';
}
</script>

Below is the CSS code so as to add on your taste sheet:

#loading_screen
{ show: block; place: absolute; left: 0px; most sensible: 0px; peak: 100%; width: 100%; colour: #FFF; text-align: middle; padding: 80px; background-color: #000; backgground-color: rgba(0, 0, 0, .5); box-sizing: border-box;
}

Within the frame of the web page, in any case, you wish to have so as to add those traces of code instantly after the <frame>tag:

<div identity="loading_screen"> <h1>Loading...</h1> <p>web page is loading<br/> Stay hooked up and do not alternate the web page!!!</p>
</div>

Of direction you’ll be able to customise on your liking the contents of the loading display screen by way of the use of, as an example, a picture of preload, like those that you’ll be able to to find in this web page.

Browse content material