JQuery-Fragmento window.load no permite la actualizacion de elementos de mi pagina

Question

soy nuevo en el foro y queria ayuda con un codigo, tengo una pagina la cual la eh empezado a hacer y pues soy principiante en el tema de JQuery y otras Bibliotecas de JS, esta pagina tiene un pr/eloader o una pantalla de carga hecha por CSS y JQuery, esta se muestra cuando la pagina esta completamente cargada, esto impide que al realizar la funcion de tiene un buscador y un reloj no funcionen correctamente los cuales quiero agregar y no les permita actualizarse como deben. Asi que quiero reemplazar esta parte de codigo:

$(window).load(function(){
    $('#page-loader').fadeOut(500);
});

Y quiero cambiarlo a un temporizador o algo que evite que termine de cargar toda la pagina y solo aparesca en un determinado tiempo. Perdonen mi ignorancia pero como dije soy principiante. Mi codigo completo es:

<html>
  <head>
    <!--Librerias-->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
     <title>Prototipo</title>
     <link rel="shortcut icon" href="https://juststickers.in/wp-content/uploads/2014/05/CSS3-Mark-Shape-Cut.png">
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
<!--CSS de Preloader-->
     <link rel="stylesheet" href="Carga.css" type="text/css">
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
<!--CSS de Barra de menu-->
     <link rel="stylesheet" href="Barra_menu.css" type="text/css">
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
<!--CSS de Estructura de pagina-->
    <link rel="stylesheet" href="Estructura.css" type="text/css">
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
<!--CSS Scroll To Top-->   
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
     <link rel="stylesheet" href="ScollToUp.css" type="text/css">
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
<!--CSS y JS de Galeria-->
     <meta charset="UTF-8">
     <link rel="stylesheet" href="Galeria.css" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <script src="js/jquery.flexslider.js"></script>
     <script type="text/javascript" charset="utf-8">
     $(window).load(function() {
       $('.flexslider').flexslider({
         touch: true,
         pauseOnAction: false,
         pauseOnHover: false,
       });
     });
     </script>
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
<!--JQuery Preloader-->
    <script>
        $(window).load(function(){
    $('#page-loader').fadeOut(500);
    });
     </script>
<!--S---------------------------------------------------------------------------------------------------------------------------S--> </head>
    <body>
 <!--Preloader-->
<div id="page-loader"><span class="preloader-interior"></span></div>

 <!--Barra de Menu-->
      <header> 
        <section class="wrapper">
           <center>
           <div class="logo">
           <img src=https://juststickers.in/wp-content/uploads/2014/05/CSS3-Mark-Shape-Cut.png width=50px heiht=50px>
           </div>
            </center>
          <nav>
        <ul class="nav">
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Tutoriales</a>
                <ul>
          <li><a href="">Submenu1</a></li>
          <li><a href="">Submenu2</a></li>
          <li><a href="">Submenu3</a></li>
          <li><a href="">Submenu4</a>
            <ul>
              <li><a href="">Submenu1</a></li>
                  <li><a href="">Submenu2</a></li>
                  <li><a href="">Submenu3</a></li>
              <li><a href="">Submenu4</a></li>

            </ul>
         </li> 
          </ul> 
        </li>       
            <li><a href="#">Cursos</a>  
              <ul>
            <li><a href="">Submenu1</a></li>
        <li><a href="">Submenu2</a></li>
        <li><a href="">Submenu3</a></li>
        <li><a href="">Submenu4</a>
          <ul>
            <li><a href="">Submenu1</a></li>
                <li><a href="">Submenu2</a></li>
            <li><a href="">Submenu3</a></li>
            <li><a href="">Submenu4</a></li>
          </ul>
           </li>
        </ul>
      </li>
      <li><a href="#">Preguntame algo</a></li>
      <li><a href="#">Contacto</a></li>
       </ul>
    </nav>
    </center>
      <form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='b-query' maxlength='255' name='q' onblur='if(this.value==&quot;&quot;)this.value=&quot;Haga su busqueda&quot;;else;this.value=this.value' onfocus='if(this.value==&quot;Haga su busqueda&quot;)this.value=&quot;&quot;;else;this.value=this.value' size='15' type='text' value='Haga su busqueda'/>
<input class='blue' id='b-searchbtn' type='submit' value='Buscar'/>
</form>
      </section>
  </header>
  <br><br><br>
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
<!--Galeria-->
  <div class="flexslider">
    <ul class="slides">
      <li>
    <a href=><img src="https://en-mx.ecolab.com/-/media/Ecolab/Ecolab-Home/Images/Homepage/Carousel/Nalco-Champion/YukonCorrosionInhibitor-jpg.jpg?h=600&la=en&w=2000&hash=B0FD69A166C3C16E21DC6D13CB79318C04F60EE6" alt="Error al cargar, intenta mas tarde..."></a>
    <section class="flex-caption">
    <p></p>
    </section>
      </li>
      <li>
        <a href=><img src="https://i2.wp.com/blog.ibroker.es/wp-content/uploads/2017/07/fondo-4.jpg?fit=2000%2C600&ssl=1" alt="Error al cargar, intenta mas tarde..."></a>
    <section class="flex-caption">
    <p></p>
    </section>
     </li>
     <li>
    <a href=><img src="https://www.iddomotica.com/wp-content/uploads/2017/09/DOMOTICA-BBVA-MADRID-2000x600.jpg" alt="Error al cargar, intenta mas tarde..."></a>
        <section class="flex-caption">
    <p></p>
    </section>
     </li>
    </ul>
   </div>
<!--S---------------------------------------------------------------------------------------------------------------------------S--> 
 <div class="cuerpo">
     <div class="partea">
     </div>
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
     <div class="parteb">
       <center>
         <TB>Bienvenido a CSS!</TB>
         <hr width=90%> 
       </center> 
       <img style="float:left; margin:0px;" src=https://pengembanganwebindonesia.files.wordpress.com/2017/05/css.png width=200px height:200px>
       <TXB><br><br>La idea de CSS es la de utilizar el concepto de separacion de presentacion y contenido, intentando que los documentos HTML incluyan solo informacion y datos, relativos al significado de la informacion a transmitir (el contenido), y todos los aspectos relacionados con el estilo (diseno, colores, formas, etc...) se encuentren en un documento CSS independiente (la presentacion).</TXB>    
    </div>
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
     <div class="partec">
     </div>
   </div>
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
   <div class="pie">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
<a class="gotopbtn" href="#"><i class="fas fa-caret-up"></i></a>
<!--S---------------------------------------------------------------------------------------------------------------------------S-->
</body>


</html>

Intenta usar la herramienta "Fragmento JS/HTML/CSS" para mostrar todo tu código. — Alex Garcia, Apr 27 '19 at 21:34
Este es el codigo completo el cual posee 2 veces el fragmento JQuery mencionado uno dentro de el preloader y el otro en una galeria o deslizador de imagenes. — Lee, Apr 27 '19 at 21:45
Es ```$(window).load()``` necesario? Que pasa si lo eliminas y dejas toda la lógica fuera de la función? — Alex Garcia, Apr 27 '19 at 21:59
Lo eh intentado y lo que ocurre es que la pantalla de preloader se queda de forma infinita o jamas desaparece. — Lee, Apr 27 '19 at 22:02
En si lo que busco es que desaparesca o ejecute la accion para ocultar el preloader sin necesidad de esperar a la pagina a su carga y yo poner cuando haga la accion o desaparesca. — Lee, Apr 27 '19 at 22:18
Bienvenido a Stackoverflow. No entiendo exactamente cuál es tu problema. jQuery tiene el sustituto de `document.ready`, que es `$(function() { /*código*/ });` Todo lo que esté en ese bloque no se ejecutará hasta que el DOM esté totalmente cargado. Debes tener en cuenta que el DOM (document) y la ventana (window) no son lo mismo. Consulta [esta respuesta](https://es.stackoverflow.com/a/51961/29967) para más detalles. — A. Cedano, Apr 27 '19 at 23:10
Gracias y gracias,no es lo que buscaba pero en parte me ayudo a buscar una solucion satisfacctoria , muchas gracias A. Cedano, perdon por mi ignorancia pero voy emepzando. — Lee, Apr 28 '19 at 02:05

JQuery-Fragmento window.load no permite la actualizacion de elementos de mi pagina

0 Answers0