Всем привет. Имеется автономная HTML страница на компьютере. При открытии страницы открывается заставка, на этой заставке есть кнопка. До закрытия заставки, которая закрывается после нажатия кнопки, начинает выполняться скрипт, до этого выполнение скрипта не происходит, очевидно все данные загружены где-то в памяти. Вот кусок скрипта, который не выполняется до закрытия заставки. Этот вариант предложен одним из участников этого форума.
<div class="overlay">
<button type="button" disabled>
Загрузка...
</button>
</div>
<div class="container">
<div class="image-stack">
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
z-index: 10;
}
button {
width: 160px;
height: 60px;
background-color: #3498db;
border: 2px solid #2980b9;
border-radius: 5px;
padding: 10px;
margin: 10px;
color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
// Эта часть скрипта начинает выполняться после закрытия заставки.
const MP3_URL =
"https://moosic.my.mail.ru/file/5a38b167bc1c86b7d83d1d1577b49ace.mp3";
document.addEventListener('DOMContentLoaded', () => {
// Для печати текста const printText добавлено для задержки выполнения function search_textNodes(b)
const printText = () => {
var textNodes = [];
var textNodes_data = [];
var i = 0;
function search_textNodes(b) {
b = b.childNodes;
for (var c = 0, d = b.length; c < d; c++) {
var a = b[c];
if (a.nodeType == 3) {
textNodes.push(a);
textNodes_data.push(a.data);
a.data = ""
} else a.hasChildNodes() && search_textNodes(a)
}
};
var d = document.getElementById('test');
search_textNodes(d);
(function() {
var a = textNodes_data[i];
if (a) {
textNodes[i].data += a.charAt(0);
textNodes_data[i] = a.substr(1)
} else i++;
i < textNodes.length && setTimeout(arguments.callee, 160)
})();
}
// Загрузка аудио, начало работы, на кнопку ставим картинку.
const audio = new Audio();
const play = () => {
audio.play().catch(e => {
alert(e.message);
});
};
audio.addEventListener('canplaythrough', () => {
const button = document.querySelector('.overlay button');
if (!button) return;
const btn = document.createElement('input');
btn.type = 'image';
btn.src = 'https://habrastorage.org/webt/xw/7t/vu/xw7tvunnrzbaixx5gfneqhwqlw4.png';
btn.width = '900';
button.after(btn);
button.remove();
btn.addEventListener('click', () => {
document.querySelector('.overlay')?.remove();
audio.muted = false;
audio.loop = false; // отключаем зацикливание музыки
audio.volume = 1; // 0..1
play();
printText();
}, {
once: true
});
});
audio.addEventListener('error', () => {
alert(audio.error?.message ?? 'Something went wrong');
});
audio.src = MP3_URL;
Далее у меня есть продолжение скрипта, но эта его часть начинает выполняться сразу с открытием заставки, а надо чтобы и эта часть скрипта начинала выполняться только после закрытия заставки, как и выше
описанные музыка и функция.
const frazas = [
{src: "https://habrastorage.org/webt/7e/zs/bh/7ezsbh3mvq1wrlzft96v5tt_j04.png",
imgpos: [180, 516],
text: "Час сидим<br> Привет, Вася.",
textpos: [208, 545]
},
// Повторяется вывод нескольких подобных сообщений
];
const fishImages = [
{src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [310, 600], scale: 0.6},
// Повторяется вывод нескольких подобных картинок
];
const fishImages_1 = [
{src: "https://habrastorage.org/webt/kk/cn/4_/kkcn4_t1mb8fdvqeo6smjw3vx-s.gif", pos: [310, 600], scale: 0.6},
// Повторяется вывод нескольких подобных картинок
];
const img = document.querySelector('.fraza img');
const txt = document.querySelector('.fraza b');
const delay = (t) => new Promise (r => setTimeout(r, t))
async function cycle () {
await delay(4500);
for (let f of fishImages) {
img.src = f.src;
img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
img.style.setProperty("--scale", f.scale)
await delay(4500);
}
img.style = 'opacity: 0;'
await delay(6500);
for (let f of frazas) {
img.src = f.src;
img.style = `top: ${f.imgpos[0]}px; left: ${f.imgpos[1]}px; opacity: 1;`
txt.innerHTML = f.text
txt.style = `top: ${f.textpos[0]}px; left: ${f.textpos[1]}px; opacity: 1;`
await delay(3000);
img.style = `top: ${f.imgpos[0]}px; left: ${f.imgpos[1]}px; opacity: 0;`
txt.innerHTML = f.text
txt.style = `top: ${f.textpos[0]}px; left: ${f.textpos[1]}px; opacity: 0;`
await delay(1500);
}
txt.textContent = '';
img.style.display = 'none';
img.style = 'opacity: 0;'
await delay(4500);
for (let f of fishImages_1) {
img.src = f.src;
img.style = `top: ${f.pos[0]}px; left: ${f.pos[1]}px;`
img.style.setProperty("--scale", f.scale)
await delay(4500);
}
}
cycle();
const arr = [{show : 44000, hide : 184000}, {show : 183500}, {show : 184000, hide : 186500},{show : 186000}];
document.querySelectorAll('.blink-image').forEach((image, index) => {
let {show, hide} = arr[index];
setTimeout(() => image.classList.add('open'), show);
setTimeout(() => image.classList.remove('open'), hide);
});
});
Сам я, по причине лишь малейшего понятия в JS, сделать не могу. Прошу помощи у форумчан. Если дал мало информации для решения этой проблемы, то полный вариант страницы смотрим
тут https://codepen.io/bsi_52/pen/OJGoxWy
