JS властивість Event.loadstart
Загальний опис
Подія loadstart спрацьовує на самому початку завантаження ресурсу, такого як аудіо, відео, або дані, що завантажуються за допомогою API. Це перший крок у ланцюгу подій, пов'язаних із завантаженням, і його корисно використовувати для індикації того, що процес завантаження щойно розпочався. Наприклад, у разі завантаження відео можна показати спіннер або повідомлення "Завантаження розпочато" ще до того, як з'явиться можливість відтворювати файл.
Подію loadstart зазвичай використовують у медіаплеєрах, де важливо забезпечити користувача зворотним зв'язком на етапі початку завантаження. У поєднанні з іншими подіями завантаження, такими як progress, load або loadeddata, вона дозволяє більш точно контролювати процес завантаження медіафайлів або даних.
Приклад використання:
const video = document.querySelector('video');
video.addEventListener('loadstart', function() {
console.log('Завантаження відео розпочато');
});
Цей приклад відстежує початок завантаження відеофайлу і виводить повідомлення в консоль. Це може бути використано для початкової індикації процесу завантаження перед тим, як з'являться перші медіадані або можливість відтворення.
Подія loadstart також може бути застосована до інших типів завантажуваних ресурсів, наприклад, для роботи з XMLHttpRequest, Fetch API або завантаженням зображень. Це дозволяє відстежувати старт будь-якого завантаження і забезпечувати користувача відповідним інтерфейсом, наприклад, відображати індикатор завантаження або змінювати статус завантаження.
У контексті обробки завантажуваних ресурсів, ця подія є корисною частиною для початкового інформування про те, що процес розпочався, але не дає ніякої інформації про те, скільки ресурсів вже завантажено або як довго цей процес триватиме.
автор: Bond
- Порада
-
У випадках, коли завантаження може бути перервано або скасовано, подія
автор: Bondloadstartдозволяє почати відстежувати ресурс із самого початку, що корисно для обробки таких ситуацій, як скасування запиту або повторне завантаження даних. - Порада
-
При використанні Fetch API або XMLHttpRequest для завантаження даних, подія
автор: Bondloadstartдозволяє інформувати користувача про початок запиту. Це корисно для показу індикатора активності або повідомлень про стан запиту. - Порада
-
З подією
автор: Bondloadstartможна керувати станом кнопок або інших елементів інтерфейсу. Наприклад, кнопка відтворення може бути неактивною до моменту, коли завантаження почнеться, і стане доступною тільки після цього.
Синтаксис
element.addEventListener('loadstart', function() {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 66 | 57 | 11.1 | 53 | 16 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 66 | 66 | 57 | 11.3 |
| Переглядач |  |
 |
|---|---|---|
| 15.0.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<header>
<h2 class="title">Подія "loadstart"</h2>
<p class="description">Викликається на початку завантаження ресурсу, наприклад, відео або файлу.</p>
</header>
<main>
<div class="result">
<button id="loadVideoBtn">Завантажити відео</button>
<p id="statusMessage">Натисніть кнопку для завантаження відео.</p>
<div id="loader" style="display: none;">⏳ Завантаження...</div>
<video id="videoPlayer" controls style="display: none; width: 100%; max-width: 500px;">
Ваш браузер не підтримує відео.
</video>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#statusMessage {
margin-top: 15px;
font-weight: bold;
}
#loader {
margin-top: 15px;
font-size: 18px;
color: #ff0000;
}JS
document.getElementById('loadVideoBtn').addEventListener('click', function () {
const video = document.getElementById('videoPlayer');
const loader = document.getElementById('loader');
const statusMessage = document.getElementById('statusMessage');
// Показуємо індикатор завантаження і оновлюємо статус
loader.style.display = 'block';
statusMessage.textContent = 'Завантаження відео розпочалося...';
// Прив'язуємо подію loadstart до відео
video.addEventListener('loadstart', function () {
loader.style.display = 'block';
statusMessage.textContent = 'Завантаження відео розпочалося...';
});
// При завантаженні відео ховаємо індикатор завантаження
video.addEventListener('canplay', function () {
loader.style.display = 'none';
statusMessage.textContent = 'Відео готове до відтворення.';
video.style.display = 'block';
});
// Завантажуємо відео
video.src = silentWav(30);
video.load();
});
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}HTML
<div id="statusMessage">Демонстраційний елемент</div>JS
const xhr = new XMLHttpRequest();
const status = document.getElementById('statusMessage');
// На бойовій сторінці тут була б адреса API; у прикладі відповідь лежить
// просто в адресі даних, тому запит нікуди не йде
xhr.open('GET', 'data:application/json,{"ok":true}');
xhr.addEventListener('loadstart', function() {
status.textContent = 'Запит даних розпочато...';
});
xhr.send();HTML
<video id="videoPlayer" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>
<div id="statusMessage">Джерело ще не задано</div>JS
const video = document.getElementById('videoPlayer');
const status = document.getElementById('statusMessage');
video.addEventListener('loadstart', function() {
status.textContent = 'Завантаження відео розпочато...';
});
video.src = silentWav(30);
video.load();
// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
const size = seconds * rate; // 8-бітний моно PCM: один байт на семпл
const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;
return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}Коментарі
Коментарів ще немає — будьте першим!