How to make a loading screen before opening the site

Question

How to make a loading screen before opening the site

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (2 votes)
#4 by (1 votes)

4

Hello, my site takes MUCH to start, a lot to load and I would like to know how to do a Loading screen (as in MEGA ) while the main site loads.

php carregamento

asked by anonymous 13.05.2015 / 03:31

4 answers

3

If you want with image:

jquery

  jQuery(window).load(function () {
      $(".loader").delay(1500).fadeOut("slow"); //retire o delay quando for copiar!
    $("#tudo_page").toggle("fast");
});

.css

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('http://i.imgur.com/zAD2y29.gif') 50% 50% no-repeat white;
}

html:

<div id="loader" class="loader"></div>
<div style="display:none" id="tudo_page"> CONTEUDO DA PÁGINA <div>

link

13.05.2015 / 16:17

2

You can create a "div" just below the "body" and perform an "onload". It looks like this:

HTML:

<body onload="loading()">
    <div id="load"></div>
    ....

CSS:

#load {
    position: fixed;
    display: block;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 }

JS:

function loading(){
     $('#load').css('display','none');
}

With this code, as soon as a user opens the page, this #load element will appear and will only disappear once the entire page is loaded through the function being called by the onload.

I'm developing a site that contains this load with a .gif as the background of the #load element.

08.02.2018 / 12:21

1

<div id="content" style="display: none">
    Conteúdo da página.
</div>

<div id="loading" style="display: block">
    Loading...
</div>

// Just to simulate loading delay.

var i = setInterval(function () {
    clearInterval(i);

    // O código desejado é apenas isto:
    document.getElementById("loading").style.display = "none";
    document.getElementById("content").style.display = "block";

}, 2000);

DEMO

13.05.2015 / 12:14

Android: Error in getContext () when using SharedPreferences [duplicate] Get data from an XML file, using XPath and C #

score 4 · Accepted Answer

You can use the code below as a template to mount your loading . You can put a simple message like "Loading .. Please wait", like a gif image as per simulation below. Note that I put the range to simulate, but in practice you will change the .js code from the simulation to this (using jQuery ):

$(window).load(function() {
     document.getElementById("loading").style.display = "none";
     document.getElementById("conteudo").style.display = "inline";
})

Simulation

var i = setInterval(function () {
    
    clearInterval(i);
  
    // O código desejado é apenas isto:
    document.getElementById("loading").style.display = "none";
    document.getElementById("conteudo").style.display = "inline";

}, 4000);

<div id="loading" style="display: block">
    <img src="http://media.giphy.com/media/FwviSlrsfa4aA/giphy.gif"style="width:150px;height:150px;" />
</div>

<!-- COLOQUE A DIV "loading" ACIMA DE TODO O CONTEUDO DO SITE (ABAIXO DA <body>) -->

<div id="conteudo" style="display: none">
  Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
 </div>