Возможно ли поймать событие загрузки элемента?

Загружается элемент div с текстом привет
Необходимо отловить момент рендера и заменить текст привет на пока

Если я заменю текст после того, как элемент загрузится, то будет секундное мигание,
необходимо этого избежать.
  • Вопрос задан
  • 412 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
1) Скрыть элемент через стили (если они загружаются в шапке не асинхронно, ну или добавьте inline стили к элементу), после загрузки поменять текст и показать.
2) Скрыть через стили, добавить текст через стили, через свойство content. Чтобы не кидать текст в CSS файл, используйте функцию attr. Пример https://jsfiddle.net/y86e3a4m/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
dollar
@dollar
Примерно так:
let style = document.createElement('style');
style.innerHTML = `
div {
	animation-name: nodeReady;
	animation-duration: 0.001s;
}

@keyframes nodeReady {  
	from { clip: rect(1px, auto, auto, auto); }
	to { clip: rect(0px, auto, auto, auto); }  
}
`;
document.head.appendChild(style);

document.addEventListener("animationstart", function(e) {
	if (e.animationName == "nodeReady") {
		if (e.target.innerHTML.trim() == 'привет') e.target.innerHTML = 'Пока';
	}
}, false);

По стилям там сами смотрите. Если у вас есть class, например, можно вместо div его указать:
.mydiv {
	animation-name: nodeReady;
	animation-duration: 0.001s;
}

Если вы инжектитесь из расширения, то у вас не будет ни элемента head, ни body. Придётся использовать какой-то такой костыль:
document.children[0].appendChild(style);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы