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

Question

[timokins]

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

Если я заменю текст после того, как элемент загрузится, то будет секундное мигание,
необходимо этого избежать.

Answer 1

[Владимир Проскурин]

1) Скрыть элемент через стили (если они загружаются в шапке не асинхронно, ну или добавьте inline стили к элементу), после загрузки поменять текст и показать.
2) Скрыть через стили, добавить текст через стили, через свойство content. Чтобы не кидать текст в CSS файл, используйте функцию attr. Пример https://jsfiddle.net/y86e3a4m/

Comments

[timokins]

точно! через стили скрыть

Answer 2

[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);