From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../api/window/domcontentloaded_event/index.html | 177 +++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 files/pt-br/web/api/window/domcontentloaded_event/index.html (limited to 'files/pt-br/web/api/window/domcontentloaded_event') diff --git a/files/pt-br/web/api/window/domcontentloaded_event/index.html b/files/pt-br/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..eb54671921 --- /dev/null +++ b/files/pt-br/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,177 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +

O evento DOMContentLoaded é acionado quando todo o HTML foi completamente carregado e analisado, sem aguardar pelo CSS, imagens, e subframes para encerrar o carregamento. Um evento muito diferente - load - deve ser usado apenas para detectar uma página completamente carregada. É um engano comum as pessoas usarem load quando DOMContentLoaded seria muito mais apropriado.

+ +
+

Nota: Javascript Síncrono pausa a análise do DOM.

+
+ +

Acelerando

+ +

Se você quer que o DOM seja analisado o mais rápido possível após uma requisição do usuário, você deve usar recursos do javascript assíncrono e otimizar o carregamento de folhas de estilo pois, caso contrário, a página será carregada mais lentamente pois muitos itens serão carregados paralelamente, atrasando a visualização da página.

+ +
+
+ +

Informações gerais

+ +
+
Especificação
+
HTML5
+
Interface
+
Event
+
Propaga
+
Sim
+
Cancelável
+
Sim (embora especificado como evento simples não-cancelável)
+
Alvo
+
Document
+
Ação Default
+
Nenhuma.
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Alvo do evento (O topo do DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Tipo de evento
bubbles {{readonlyInline}}{{jsxref("Boolean")}}O evento é por padrão bubbles ou não.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}O evento pode ser cancelado ou não.
+ +

Exemplo

+ +

Básico

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM completamente carregado e analisado");
+  });
+</script>
+
+ +

Forçando o atraso do DOMContentLoaded

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM completamente carregado e analisado");
+  });
+
+for(var i=0; i<1000000000; i++)
+{} // este script síncrono irá o atrasar carregamento do DOM. Então o evento DOMContentLoaded irá ser ativado mais tarde.
+</script>
+
+ +

 

+ +

Verificando se o carregamento está completo

+ +

DOMContentLoaded pode disparar antes do seu script ser carregado, então é importante validar antes de adicionar um listener.

+ +
function doSomething() {
+  console.info("DOM carregado");
+}
+
+if (document.readyState === "loading") {  // Ainda carregando
+  document.addEventListener("DOMContentLoaded", doSomething);
+} else {  // `DOMContentLoaded` foi disparado
+  doSomething();
+}
+ +

 

+ +

Compatibilidade entre Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suporte básico0.2{{ CompatGeckoDesktop("1") }}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Propagação para este evento é suportada à partir do Gecko 1.9.2, Chrome 6, e Safari 4.

+ +

Cross-browser fallback

+ +

O Internet Explorer 8 suporta o evento readystatechange, que pode ser usado para detectar quando o DOM está pronto. Em versões anteriores do Internet Explorer, este estado pode ser detectado tentando executar document.documentElement.doScroll("left"); repetidas vezes; este comando dará erro repetidamente, até que o DOM esteja pronto.

+ +

Há também uma abundância de bibliotecas de propósito geral que oferecem métodos cross-browser para detectar se o DOM está pronto.

+ +

Eventos Relacionados

+ + -- cgit v1.2.3-54-g00ecf