Как отобразить экран загрузки при загрузке контента сайта - PullRequest
Новая
       14

Как отобразить экран загрузки при загрузке контента сайта

26 голосов
/ 28 октября 2008

Я работаю над сайтом, который содержит целую кучу mp3-файлов и изображений, и я хотел бы показать загрузочный GIF, пока загружается весь контент.

Я понятия не имею, как этого добиться, но у меня есть анимированный GIF, который я хочу использовать.

Есть предложения?

Ответы [ 7 ]

28 голосов
/ 28 октября 2008

Обычно сайты, которые делают это, загружая контент через ajax и прослушивая событие readystatechanged, обновляют DOM загрузочным GIF или содержимым.

Как вы сейчас загружаете свой контент?

Код будет похож на этот: 

function load(url) {
    // display loading image here...
    document.getElementById('loadingImg').visible = true;
    // request your data...
    var req = new XMLHttpRequest();
    req.open("POST", url, true);

    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            // content is loaded...hide the gif and display the content...
            if (req.responseText) {
                document.getElementById('content').innerHTML = req.responseText;
                document.getElementById('loadingImg').visible = false;
            }
        }
    };
    request.send(vars);
}

Существует множество сторонних библиотек javascript, которые могут упростить вашу жизнь, но вышесказанное - действительно все, что вам нужно.

8 голосов
/ 04 ноября 2010

Вы сказали, что не хотите делать это в AJAX. Хотя AJAX отлично подходит для этого, есть способ показать один DIV, ожидая загрузки всего <body>. Это выглядит примерно так: 

<html>
  <head>
    <style media="screen" type="text/css">
      .layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
      .layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
    </style>
    <script>
      function downLoad(){
        if (document.all){
            document.all["layer1"].style.visibility="hidden";
            document.all["layer2"].style.visibility="visible";
        } else if (document.getElementById){
            node = document.getElementById("layer1").style.visibility='hidden';
            node = document.getElementById("layer2").style.visibility='visible';
        }
      }
    </script>
  </head>
  <body onload="downLoad()">
    <div id="layer1" class="layer1_class">
      <table width="100%">
        <tr>
          <td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
        </tr>
      </table>
    </div>
    <div id="layer2" class="layer2_class">
        <script type="text/javascript">
                alert('Just holding things up here.  While you are reading this, the body of the page is not loading and the onload event is being delayed');
        </script>
        Final content.      
    </div>
  </body>
</html>

Событие onload не сработает, пока не загрузится вся страница. Таким образом, layer2 <DIV> не будет отображаться до тех пор, пока не закончится загрузка страницы, после чего сработает onload.

3 голосов
/ 07 декабря 2014

Как насчет jQuery? Простое ... 

$(window).load(function() {      //Do the code in the {}s when the window has loaded 
  $("#loader").fadeOut("fast");  //Fade out the #loader div
});

И HTML ... 

<div id="loader"></div>

И CSS ... 

#loader {
      width: 100%;
      height: 100%;
      background-color: white;
      margin: 0;
}

Затем в вашем загрузчике div вы бы поместили GIF и любой текст, который вы хотели, и он исчезнет после загрузки страницы.

2 голосов
/ 01 января 2016

Во-первых, установите загрузочный образ в div. Далее, получите элемент div. Затем установите функцию, которая редактирует CSS, чтобы сделать видимость «скрытой». Теперь в <body> установите onload для имени функции.

1 голос
/ 21 апреля 2016

# Метод чистого CSS

Поместите это в верхнюю часть вашего кода (перед тегом заголовка) 

<style> .loader {
  position: fixed;
  background-color: #FFF;
  opacity: 1;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
</style>
<div class="loader">
  Your Content For Load Screen
</div>

И это у основания после всего другого кода (кроме тега / html) 

<style>
.loader {
    -webkit-animation: load-out 1s;
    animation: load-out 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}

@keyframes load-out {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}
</style>

Это всегда работает для меня 100% времени

0 голосов
/ 09 января 2014

Вы можете использовать элемент <progress> в HTML5. Смотрите эту страницу для исходного кода и живого демо. http://purpledesign.in/blog/super-cool-loading-bar-html5/

вот элемент прогресса ... 

<progress id="progressbar" value="20" max="100"></progress>

значение загрузки будет начинаться с 20. Конечно, не хватит только элемента. Вы должны переместить его при загрузке скрипта. Для этого нам нужен JQuery. Вот простой скрипт JQuery, который запускает процесс с 0 до 100 и что-то делает в определенный промежуток времени. 

<script>
        $(document).ready(function() {
         if(!Modernizr.meter){
         alert('Sorry your brower does not support HTML5 progress bar');
         } else {
         var progressbar = $('#progressbar'),
         max = progressbar.attr('max'),
         time = (1000/max)*10, 
         value = progressbar.val();
        var loading = function() {
        value += 1;
        addValue = progressbar.val(value);
        $('.progress-value').html(value + '%');
        if (value == max) {
        clearInterval(animate);
        //Do Something
 }
if (value == 16) {
//Do something 
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something 
}
if (value == 72) {
//Do something 
}
if (value == 1) {
//Do something 
}
if (value == 86) {
//Do something 
    }

};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>

Добавьте это в свой HTML-файл. 

<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
 <progress id="progressbar" value="0" max="100"></progress>
 <span class="progress-value">0%</span>
</div>
 </div>

Надеюсь, это даст вам старт.

0 голосов
/ 29 июня 2012

Есть довольно простой способ сделать это. Код должен быть примерно таким: 

<script type="test/javascript">

    function showcontent(x){

      if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }

      xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 1) {
            document.getElementById('content').innerHTML = "<img src='loading.gif' />";
        }
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.getElementById('content').innerHTML = xmlhttp.responseText;
        } 
      }

      xmlhttp.open('POST', x+'.html', true);
      xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      xmlhttp.send(null);

    }

И в HTML: 

<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>

Я сделал что-то подобное на своей странице, и это прекрасно работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...