Me gustaría eliminar mi jQuery y necesito reemplazar $(function() { ... });
con algo parecido He visto a personas usar la nueva propiedad HTML defer
, pero la usan para llamar a otro script en lugar de llamar a códigos en la misma fuente HTML. ¿Cómo puedo usar defer
para implementar la misma característica ready
en mi código HTML sin llamar a otro script?
<div style="margin-top: 100px">.</div> <div>AAAA</div> <script defer>alert('hi')</script> <div>BBBB</div>
Básicamente, tiene tres opciones estándar a su disposición, dos explícitas y una implícita y dependiendo de cómo el navegador analiza el documento (de arriba hacia abajo, elemento por elemento):
defer
Agregar el atributo defer
a una etiqueta de secuencia de comandos hace que la ejecución de la secuencia de comandos se retrase hasta inmediatamente antes de que DOMContentLoaded
se active (cuando se analiza el DOM), y se asegura de que DOMContentLoaded
no se active antes de que se haya ejecutado la secuencia de comandos completa. Tenga en cuenta que defer
no debe usarse cuando falta el atributo src
(es decir, solo está disponible para scripts externos).DOMContentLoaded
(o oyente readyStateChange
si te gusta complicar las cosas).script
justo antes de la etiqueta de cierre </body>
. Tenga en cuenta que los scripts que tienen type="module"
se posponen automáticamente.
Personalmente, dejé de usar jQuery alrededor de 2015 y, desde entonces, he estado trabajando con DOMContentLoaded
desde entonces, sin un solo problema en todos esos años.