es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Retardo del preloader de HTML (Elementor)

02 Aug, 2023 Programación

Necesito ayuda. Hay una página que está utilizando un iframe, por esa razón el cambio acumulativo de diseño es bastante notable. Por lo tanto, queríamos utilizar un preloader para que no se vea eso. Pero el código del preloader solo muestra el preloader durante unos 100 ms. Quería cambiar esto, así que agregué este código entre la etiqueta de script. Pero ahora el preloader no desaparece en absoluto. Sólo sigue girando eternamente.

Este es el código:

jQuery(document).ready(function($) {
  $(window).load(function() {
    setTimeout(function() {
      $('#preloader').fadeOut('slow', function() {});
    }, 200); // set the time here
  });
});

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('https://example.com/example.svg') 50% 50% no-repeat #aa9767;
  /* Cambia el #fff aquí por el color de fondo que elijas para la sección de pantalla completa del preloader */
}

.elementor-editor-active .loader {
  display: none;
}

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="loader"></div>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que has añadido código adicional entre las etiquetas de script y ahora el preloader no desaparece y sigue girando eternamente. Aquí tienes el código modificado que has añadido:

    jQuery(document).ready(function($) {
  $(window).load(function() {
    setTimeout(function() {
      $('#preloader').fadeOut('slow', function() {});
    }, 200); // establece el tiempo aquí
  });
});

    Para ajustar el tiempo en que se muestra el preloader, has cambiado el valor de timeout en esta línea:

    }, 200); // establece el tiempo aquí

    Si quieres aumentar el tiempo en que se muestra el preloader, debes aumentar este valor. Sin embargo, parece que este cambio puede haber causado que el preloader no desaparezca en absoluto.

    Una posibilidad es que haya un problema con tu código HTML o CSS. El preloader se define como un elemento div con una clase de “loader”. Esta clase tiene algún estilo CSS que posiciona el div, establece la imagen de fondo y establece el z-index para mostrarlo en la parte superior de otros elementos:

    .loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('https://example.com/example.svg') 50% 50% no-repeat #aa9767;
}

    También hay un CSS que oculta el preloader cuando el editor de Elementor está activo:

    .elementor-editor-active .loader {
  display: none;
}

    Si sigues teniendo problemas con el preloader, puede que quieras revisar tu código HTML y CSS para asegurarte de que el preloader se define y se estiliza correctamente. También puedes considerar buscar la ayuda de un desarrollador u otro experto técnico para solucionar este problema.

Comments are closed.