Как сделать «бесшовное» обновление страницы?

Question

[RainoYT]

Здравствуйте!
Перезапускаю страницу с помощью динамического добавления тега
В этом случае страница просто перезапускается, а именно сначала полностью очищается, а только потом загружает контент.
Но вот вопрос, можно ли как-то обработать поведение этого тега , чтобы он не очищал страницу при перезагрузке, а только заменял контент страницы. То есть сделать так, чтобы не было этого момента с полностью пустой страницей. Возможно, это можно сделать на JS? Искал в интернете, но ничего подобного не нашёл, своего решения тоже придумать не могу.
Если такое сделать невозможно, может быть существуют другие варианты обновления страницы путём динамического добавления на странице? То есть что-то добавить на странице тем же AJAX запросом, чтобы страница была перезагружена так, как я описал выше. Просто добавить не срабатывает, если его просто добавить.
В общем, я наверное уже как-то сильно загнул вопрос, но ещё раз вкратце подведу итог.
Как можно обновить страницу так, чтобы она не очищалась, а сразу заменяла старую на новую, чтобы этап "пустоты" страницы был незаметен?

Answer 1

[tundramani]

например весь старый контент в одном элементе

создаешь новый элемент поверх старого и делаешь его изначально скрытым
заполняешь его контентом
включаешь его и удаляешь старый элемент

//сначала создаешь  элемент  и добавляешь его в документ поверх старого элемента
элемент.style.display = 'none'
элемент.innerHTML = 'тут html текст'
setTimeout(function(){
{
элемент.style.display = 'flex'
}, 100)

Comments

[RainoYT]

Это получается каким-то костыльным решением мне кажется, неужели JS не предоставляет возможным написать какой-нибудь обработчик

[RainoYT]

ёпта, а самую интересную часть, как именно подгружать страницу, не написал)

[tundramani]

RainoYT, если ты меняешь innerHTML элемента то он всегда сначала будет пустой а потом отрисуется

[tundramani]

RainoYT, сервер передает клиенту содержимое элемента который надо отобразить
эту строку ты вставляешь в элемент.innerHTML
после этого начинается отрисовка этого элемента
и через небольшой таймаут скрипт делает элемент видимым

[tundramani]

RainoYT, и можно не просто включить новый элемент
а плавно проявить его с использованием эффектов - блюр, прозрачность, зум...

[tundramani]

RainoYT, тут я предложил вариант с таймаутом
это может быть не лучший вариант если обьем данных большой
но может быть можно сделать включение через событие загрузки элемента
надо подумать ...

[tundramani]

да, есть такая возможность:

Поскольку элементы img, добавленные через innerHTML, вызывают событие onload, вы можете добавить крошечное изображение в конец исходного кода, вставленного в innerHTML, а в событии onload вы можете вызвать функцию. Также вы можете удалить изображение там.

https://question-it.com/questions/1467087/sobytie-...