Правильная имитация долгой загрузки страницы

Question

Сразу оговорюсь: я с JS не работаю, просто необходимо сделать тестовую веб-страницу. Логика у неё должна быть следующая:

При загрузке страницы изначально есть свой тайтл
Страница долго грузится (есть наработки, код будт ниже)

3а. Если страница загрузилась полностью, то тайтл меняется на другой

3б. Если загрузку страницы остановили (нажали в браузере "Стоп"), то тайтл остался прежним.

Мой код работает. Но временами, когда я начинаю грузить страницу, её head не прогружается. Страница грузится, блока head нет, тайтла нет, когда должен быть стандартный. Пытаясь вытянуть тайтл силами браузера, я получаю пустую строку вместо тайтла. Как правильно заставить страницу ВСЕГДА показывать стандартный тайтл, потом долго грузиться (3-4 секунды. Это принципиальный момент), а потом при полной загрузке менять тайтл на какой-либо новый?

Моя наработка, которая работает с попеременным успехом:

<!DOCTYPE html>
<html>
<head>
<title>iPhone</title>
<script type="text/javascript">
    function myFunction() {
        var x = document.title;
        var i;
        for (i = 0; i < 15000; i++) {
            document.getElementById("demo").innerHTML += x;
        }
        document.title = "Android";
    }
</script>
</head>
<body onload="myFunction()">
    <p id="demo">loading</p>
</body>
</html>

Answer 1

Насколько я понимаю, проблема не в том, что head не грузится и title получается пустой строкой. Скорее всего так кажется, потому что вы не даёте браузеру времени отрисовать изменения на странице: браузер не может этого делать, пока исполняет непрерывный синхронный код. Как только вы добавите паузу даже в 1 миллисекунду, всё изменится. Правда, тогда стоит уменьшить число, потому что время «загрузки» существенно увеличится.

<!DOCTYPE html>
<html>
<head>
<title>iPhone</title>
<script type="text/javascript">
    async function myFunction() {
        var x = document.title;
        var i;

        for (i = 0; i < 1500; i++) {
            await new Promise(r => setTimeout(r, 1));
            document.getElementById("demo").innerHTML += x + ' ';
        }
        document.title = "Android";
    }
</script>
</head>
<body onload="myFunction()">
    <p id="demo">loading</p>
</body>
</html>

Но с этим подходом вы не получите возможность «остановить» загрузку, потому что ваша функция по условиям запускается уже после загрузки.

БЛОГ НА HUSL

Правильная имитация долгой загрузки страницы

Ответы (1 шт):