Прогресс загрузки

Dom7 — это легкая библиотека для работы с DOM, которая предоставляет удобный и компактный API для манипуляций с элементами страницы, событий и анимаций. Работа с прогрессом загрузки требует понимания взаимодействия с событиями и динамического обновления элементов интерфейса.

Выбор элемента для отображения прогресса

Для реализации индикатора прогресса необходимо сначала выбрать соответствующий элемент в DOM. В Dom7 используется функция $ или Dom7(), которая позволяет получать коллекцию элементов по селектору:

var progressBar = $('.progress-bar'); // Получение элемента по классу

Коллекция возвращает объект Dom7, который поддерживает методы для работы с CSS, атрибутами и событиями. Даже если выбран один элемент, методы будут применяться через внутреннюю итерацию по коллекции.

Обновление прогресса с помощью CSS

Наиболее распространённый способ визуализации прогресса — использование свойства width для элемента полосы:

function updateProgress(percent) {
    progressBar.css('width', percent + '%');
}

Метод .css() позволяет задавать стили напрямую. При необходимости можно добавлять плавную анимацию через CSS-переходы:

.progress-bar {
    width: 0;
    height: 4px;
    background-color: #007aff;
    transition: width 0.3s ease;
}

В этом случае каждый вызов updateProgress будет плавно увеличивать или уменьшать ширину полосы.

События загрузки ресурсов

Для отслеживания прогресса загрузки ресурсов, таких как изображения или AJAX-запросы, Dom7 предоставляет методы для работы с событиями. Например, для изображений используется событие load:

var images = $$('img'); // $$ — псевдоним Dom7
var loadedCount = 0;

images.each(function(img) {
    $(img).on('load', function() {
        loadedCount++;
        var percent = Math.round((loadedCount / images.length) * 100);
        updateProgress(percent);
    });
});

Метод .each() позволяет итерировать коллекцию элементов, а .on() привязывает обработчики событий. В данном случае прогресс рассчитывается как отношение загруженных изображений к общему количеству.

Прогресс при AJAX-запросах

Dom7 интегрируется с обычными методами JavaScript для работы с сетевыми запросами. Для AJAX можно использовать XMLHttpRequest и отслеживать событие progress:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);

xhr.onprogr ess = function(event) {
    if (event.lengthComputable) {
        var percent = Math.round((event.loaded / event.total) * 100);
        updateProgress(percent);
    }
};

xhr.onl oad = function() {
    if (xhr.status === 200) updateProgress(100);
};

xhr.send();

Dom7 не предоставляет собственный AJAX API, но его методы позволяют легко интегрировать динамическое обновление интерфейса при работе с XMLHttpRequest или fetch.

События Dom7 для анимации прогресса

Помимо CSS-переходов, можно использовать события transitionend для выполнения действий после завершения анимации:

progressBar.on('transitionend', function() {
    if (progressBar.width() === progressBar.parent().width()) {
        console.log('Загрузка завершена');
    }
});

Метод .width() возвращает текущую ширину элемента, а .parent() позволяет обращаться к родительскому контейнеру.

Динамическое создание индикатора

Индикатор прогресса можно создать полностью программно:

var container = $('<div class="progress-container"></div>');
var bar = $('<div class="progress-bar"></div>');
container.append(bar);
$('body').append(container);

function startProgress() {
    updateProgress(0);
    var percent = 0;
    var interval = setInterval(function() {
        percent += 10;
        updateProgress(percent);
        if (percent >= 100) clearInterval(interval);
    }, 500);
}

Методы .append() и .html() позволяют динамически создавать и вставлять элементы в DOM без необходимости редактировать HTML вручную.

Управление состоянием прогресса

Для комплексных приложений полезно хранить состояние прогресса в переменных и синхронизировать его с интерфейсом:

var progressState = {
    total: 5,
    loaded: 0,
    increment: function() {
        this.loaded++;
        var percent = Math.round((this.loaded / this.total) * 100);
        updateProgress(percent);
    }
};

// Использование при загрузке нескольких ресурсов
resources.forEach(function(res) {
    $(res).on('load', function() {
        progressState.increment();
    });
});

Такой подход позволяет масштабировать систему на большое количество ресурсов, сохраняя простоту управления.

Интеграция с библиотекой анимаций

Dom7 легко сочетается с CSS-анимациями или сторонними библиотеками, такими как GSAP, для создания более сложных визуальных эффектов прогресса:

import { gsap } from 'gsap';

function animateProgress(percent) {
    gsap.to(progressBar[0], { width: percent + '%', duration: 0.5 });
}

Использование нативного массива через progressBar[0] необходимо, так как GSAP работает с DOM-элементами напрямую.

Итоговая структура индикатора

Полноценный прогресс-бар на Dom7 обычно включает:

  1. Контейнер и полосу прогресса.
  2. CSS-переходы для плавного изменения ширины.
  3. События загрузки ресурсов или AJAX.
  4. Управление состоянием в объекте или переменных.
  5. Возможность интеграции с внешними анимационными библиотеками.

Эта комбинация методов Dom7 обеспечивает простую, но мощную реализацию динамического индикатора прогресса на веб-странице.

Оглавление