Вопрос по javascript, jquery – Отобразить панель загрузки до загрузки всей страницы

37

Я хотел бы отобразить панель загрузки до загрузки всей страницы. Сейчас я просто использую небольшую задержку:

$(document).ready(function(){
    $('#page').fadeIn(2000);
});

Страница уже использует jQuery.

Примечание. Я пробовал это, но у меня это не сработало:

панель загрузки во время выполнения скрипта

Я также пробовал другие решения. В большинстве случаев страница загружается как обычно, или страница не загружается / не отображается вообще.

Спасибо за любую помощь.

Ваш Ответ

2   ответа
14

HTML

<div class="preload">
<img src="http://i.imgur.com/KUJoe.gif">
</div>

<div class="content">
I would like to display a loading bar before the entire page is loaded. 
</div>

JAVASCRIPT

$(function() {
    $(".preload").fadeOut(2000, function() {
        $(".content").fadeIn(1000);        
    });
});​

CSS

.content {display:none;}
.preload { 
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
}
​

DEMO

72

Используйте div#overlay с информацией о загрузке / .gif, которая будет охватывать всю вашу страницу:

<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

JQuery:

$(window).load(function(){
   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();
});

Вот пример сLoading bar:

демоверсия jsBin

  <div id="overlay">
    <div id="progstat"></div>
    <div id="progress"></div>
  </div>

  <div id="container">
    <img src="http://placehold.it/3000x3000/cf5">
  </div>

CSS:

*{margin:0;}
body{ font: 200 16px/1 sans-serif; }
img{ width:32.2%; }

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;                /* will be increased by JS */
  top:50%;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

JavaScript:

;(function(){
  function id(v){ return document.getElementById(v); }
  function loadbar() {
    var ovrl = id("overlay"),
        prog = id("progress"),
        stat = id("progstat"),
        img = document.images,
        c = 0,
        tot = img.length;
    if(tot == 0) return doneLoading();

    function imgLoaded(){
      c += 1;
      var perc = ((100/tot*c) << 0) +"%";
      prog.style.width = perc;
      stat.innerHTML = "Loading "+ perc;
      if(c===tot) return doneLoading();
    }
    function doneLoading(){
      ovrl.style.opacity = 0;
      setTimeout(function(){ 
        ovrl.style.display = "none";
      }, 1200);
    }
    for(var i=0; i<tot; i++) {
      var tImg     = new Image();
      tImg.onload  = imgLoaded;
      tImg.onerror = imgLoaded;
      tImg.src     = img[i].src;
    }    
  }
  document.addEventListener('DOMContentLoaded', loadbar, false);
}());
@roko Как можно показать загрузочный GIF до полной загрузки первой страницы? У меня есть веб-сайт по параллаксу, и я хочу показывать загрузку только до тех пор, пока мои первые страницы не будут загружены.
Я понимаю, что этот ответ немного устарел, но мне было интересно, если бы было решение, которое бы хорошо ухудшилось, если бы пользователь отключил JavaScript? Потому что в настоящее время они просто загружают GIF для веб-сайта.
@arandompenguin, если вы загружаете изображение с помощью скрипта в начале, который должен решить вашу проблему.
странно, вопрос с множеством мнений, но без голосов на полезный ответ
Вы уверены, что «побочных эффектов» нет? Я помню, что .load () не ждал некоторых элементов, таких как полная загрузка всех изображений на странице.Edit: Я плохо помнил, у него не должно быть никаких побочных эффектов,here is an explanation why

Похожие вопросы