Создание экрана загрузки в HTML5

Question

У меня возникли проблемы с поиском подходящего учебника по созданию экрана стиля загрузки в отношении HTML5.Честно говоря, я не знаю точно, с чего начать ...

Мой проект по сути является простой HTML5-игрой, где я буду загружать различные спрайт-листы и наборы плиток.Они будут достаточно маленькими, но я бы хотел показать небольшой загрузочный счетчик вместо пустого экрана, пока загружены все ресурсы.

Очень признателен, если кто-то может указать мне правильное направление, будь оноприличные ссылки или примеры кода, чтобы заставить меня работать ... моего гугл-фу сегодня не хватает!

---

Для пояснения мне нужно выяснить, как самим загружать ресурсы, а не искать спиннер.,Например, как рассчитать, что X% загружено.

---

Редактировать 2

Глупый я, я могу просто проверить на <variable>.image.complete.Проголосовал за закрытие.

Answer 1

Этот веб-сайт отлично подходит для загрузки анимированных GIF-файлов: http://ajaxload.info/.. Оверлей можно использовать для отображения изображения, а также для предотвращения взаимодействия со страницей во время его загрузки. Вы можете использовать div, расположить его над всем остальным (z-index) и установить ширину и высоту 100%.

Answer 2

Старый вопрос, но полезно знать, что у объекта Image также есть событие onload. Часто лучше использовать это, чем проверять завершение, например, в цикле.

Пример использования (фактически не проверено, работает):

var numImagesLoaded = 0;
function incrementAndCheckLoading(){
    numImagesLoaded++;
    if(numImagesLoaded == 2){
        // Do some stuff like remove loading screen or redirect to other URL
    }
}    

image1 = new Image();
image1.src = "image1.jpg"
image1.onload = incrementAndCheckLoading;
image2 = new Image();
image2.src = "image2.jpg"
image2.onload = incrementAndCheckLoading;

Answer 3

Это отличный ресурс для демонстрации HTML5 CSS-анимации.http://slides.html5rocks.com/#css-animation

 @-webkit-keyframes pulse {
  from {
    opacity: 0.0;
    font-size: 100%;
  }
  to {
    opacity: 1.0;
    font-size: 200%;
  }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

Это демонстрирует, как создать строку состояния загрузки: http://slides.html5rocks.com/#semantic-tags-2

 <progress>working...</progress>

Существует множество других примеров на этих слайдах, которые могут иметь то, что выИщите.

Answer 4

Вы можете использовать элемент <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>

Надеюсь, что это произойдетдать вам старт.

Answer 5

Потому что этот вопрос помечен html5 - я думаю, что мы можем сделать лучше, чем GIF Spinner. Более современная альтернатива:

http://fgnass.github.io/spin.js/