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

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

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

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

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

Изменить 2

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

Ответ 1

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

Ответ 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;

Ответ 3

Это отличный ресурс для демонстрации анимации CSS5 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>

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

Ответ 4

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

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

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

это будет иметь значение загрузки, начиная с 20. Конечно, достаточно только элемента. Вам нужно переместить его как загружаемый script. Для этого нам нужен JQuery. Вот простой JQuery script, который запускает прогресс от 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>

Надеюсь, это даст вам начало.

Ответ 5

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

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