How to make a loading screen before opening the site

Asked

Viewed 34,013 times

8

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

php loading
  • 3

    Isn’t it better to identify the cause of the problem instead of having the user 'wait'? In the example of Mega, loading is because it uses javascript to mount the view - repair the page source.

  • Yes, but the site carries an immense amount of data, so the delay

  • This Preload I find a little mistaken, every time the user changes pages is site.com/1 to the site.com/2 the Preload will load again, this is a bit boring in view of sites that has several "post".

4 answers

9


You can use the code below as a template to mount your loading. You can put a simple message like "Loading.. Wait", like a gif image as simulation below. Obs. I put the interval to simulate, but in practice you will change the . js code from the simulation to this one (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>

  • I did this, but there is a problem, I wanted to be a GIF appearing on the screen while the real site loaded and in this example first loads the site, then the GIF appears and then the site appears.

  • @Lucascarezia I checked here on a site that has a loading similar to this. You could test by placing the div loading before all the content of the site (below the <body>)?

  • Now it worked well, but it still takes about 4/5 seconds to appear the loading screen

  • @Lucascarezia The size of the loading image may be influencing this, could make a test with a text (e.g., loading...) and see if it still takes time?

  • It has decreased by 0.5 seconds the time

  • I understand, there could be several factors that influence this. Server processing, Internet speed, etc. I think there’s nothing else to do...

  • And if it is in a VPS with these settings: CPU: 2.4 Ghz, RAM: 1024 MB, Disk Space: 20 GB, Traffic: 1000 GB, It would change a lot ??

  • So, not to extend too much in the comments, add me in Skype that we can talk better. id: William.cspereira

Show 3 more comments

4

If you want with picture:

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>

http://jsfiddle.net/m7g6uq6w/

2

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

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

// Only for simulated 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

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, once a user opens the page, this #load element will appear and will only disappear after the entire page is loaded through the function being called by the "onload".

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

Browser other questions tagged php loading

You are not signed in. Login or sign up in order to post.