Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

259
Views
DOM carga lento con código para esperar jQuery

Estoy trabajando en un proyecto de Sitecore donde se hace referencia a las bibliotecas de Javascript dentro de los componentes y se cargarían antes que jQuery.

[ Considérelo como una biblioteca JS a la que se hace referencia dentro de .cshtml (MVC) ]

Esto significa que el archivo JS se carga antes que jQuery y esto arrojaría un error en la consola: $ is undefined

[Actualmente, jQuery se coloca al final de la etiqueta del cuerpo, el lugar habitual.]

Para manejar esto, los archivos JS personalizados tienen este enfoque para esperar jQuery:

 var readyForFileA = (callbackForFileA) => { if (document.readyState != "loading") { callbackForFileA(); } else { document.addEventListener("DOMContentLoaded", callbackForFileA); } } readyForFileA(() => { $(txt).click(function(){ some_method(); }); }); function some_method(){ }

Ahora el problema es que hay muchos archivos de este tipo con un código similar de "esperar hasta que se cargue jQuery" que está ralentizando la carga de DOM para las páginas, ya que supongo que va en un bucle hasta que se carga DOM.

  1. ¿Hay una mejor manera de manejar esto?
  2. La forma más sencilla es mover la referencia de jQuery a la cabecera, pero hay 40 archivos de este tipo en los que el código debe actualizarse a $(document).ready()
    Entonces, ¿se puede modificar solo esta parte?

 var readyForFileA = (callbackForFileA) => { if (document.readyState != "loading") { callbackForFileA(); } else { document.addEventListener("DOMContentLoaded", callbackForFileA); } }

Algo así como var readyForFileA = $(document).ready();

Entonces, que la siguiente parte no necesita cambiar

 readyForFileA(() => { .... });

Si no es así, sugiera una mejor alternativa.

about 4 years ago · Santiago Gelvez
1 answers
Answer question

0

Aplazar guiones

Puede intentar usar el atributo aplazar en los scripts, de esa manera se recuperan después de que el contenido de la página termine de cargarse, lo que ayudará con el rendimiento de carga de la página:

 <head> <script defer src="./myscript.js"></script> </head>

Eventos de ventana

El objeto window tiene muchos eventos que puedes usar para esto. Después de una búsqueda rápida en Google, no parece que jQuery tenga algún evento que esperar, por eso voy a usar el evento window.load en su lugar:

 // Wait for the page to load window.addEventListener("load", () => { // Code to execute once the page has loaded $(txt).click(() => { some_method(); }); });

Tenga en cuenta que es posible que desee utilizar otros eventos de ventana si su código debe ejecutarse lo antes posible.

También tenga en cuenta que las devoluciones de llamadas se consideran malas prácticas, use promesas en su lugar.

about 4 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!