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

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

Если я заменю текст после того, как элемент загрузится, то будет секундное мигание,
необходимо этого избежать.
  • Вопрос задан
  • 400 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
1) Скрыть элемент через стили (если они загружаются в шапке не асинхронно, ну или добавьте inline стили к элементу), после загрузки поменять текст и показать.
2) Скрыть через стили, добавить текст через стили, через свойство content. Чтобы не кидать текст в CSS файл, используйте функцию attr. Пример https://jsfiddle.net/y86e3a4m/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
dollar
@dollar
uBlock, Ghostery, WOT, TosterComfort, RKN Alert
Примерно так:
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);
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
BeetSoft Омск
от 50 000 до 100 000 руб.
Kernel Web Новосибирск
от 80 000 руб.
20 мая 2019, в 15:59
300 руб./за проект
20 мая 2019, в 15:53
10000 руб./за проект
20 мая 2019, в 15:24
1300 руб./в час