JavaScript preloader / прогресс / процент

У меня возникли проблемы с поиском хорошей информации о том, как сделать индикатор выполнения javascript(или jquery) с текстом, который сообщает вам процент.

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

8
image-preloader javascript jquery preloader progress-bar

2 ответов

<img> элементы есть onload событие, которое срабатывает после полной загрузки изображения. Поэтому в js вы можете отслеживать количество загруженных изображений и количество оставшихся с помощью этого события.

изображения также имеют соответствующие onerror и onabort события, которые срабатывают, когда изображение не загружается или загрузка была прервана (пользователем, нажав кнопку "x"). Вы также должны отслеживать их вместе с onload событие для отслеживания изображения правильно загружается.

дополнительный ответ:

простой пример в чистом js:

var img_to_load = [ '/img/1.jpg', '/img/2.jpg' ];
var loaded_images = 0;

for (var i=0; i<img_to_load.length; i++) {
    var img = document.createElement('img');
    img.src = img_to_load[i];
    img.style.display = 'hidden'; // don't display preloaded images
    img.onload = function () {
        loaded_images ++;
        if (loaded_images == img_to_load.length) {
            alert('done loading images');
        }
        else {
            alert((100*loaded_images/img_to_load.length) + '% loaded');
        }
    }
    document.body.appendChild(img);
}

приведенный выше пример не обрабатывает onerror или onabort для ясности, но реальный мир код должен заботиться о них, а также.

7

Как насчет использования чего-то ниже:

$('#btnUpload').click(function() {
    var bar = document.getElementById('progBar'),
        fallback = document.getElementById('downloadProgress'),
        loaded = 0;

    var load = function() {
        loaded += 1;
        bar.value = loaded;

        /* The below will be visible if the progress tag is not supported */
        $(fallback).empty().append("HTML5 progress tag not supported: ");
        $('#progUpdate').empty().append(loaded + "% loaded");

        if (loaded == 100) {
            clearInterval(beginLoad);
            $('#progUpdate').empty().append("Upload Complete");
            console.log('Load was performed.');
        }
    };

    var beginLoad = setInterval(function() {
        load();
    }, 50);

});

JSFIDDLE

вы также можете попробовать HTML5 элемент прогресса:

<section>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

<script>
var progressBar = document.getElementById('p');

function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
} </script>
</section>

http://www.html5tutorial.info/html5-progress.php

3