elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] [Pregunta]: ¿Es posible hacer algo como esto?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] [Pregunta]: ¿Es posible hacer algo como esto?  (Leído 520 veces)
MiguelCanellas


Desconectado Desconectado

Mensajes: 623



Ver Perfil
[Resuelto] [Pregunta]: ¿Es posible hacer algo como esto?
« en: 25 Agosto 2019, 17:39 »

Buenos días!

Quería saber si era posible hacer lo siguiente usando javascript o jquery.
tener un botón x donde cuando se haga click mostrará un console.log('123'); pero el click se llamará por medio de jquery de la siguiente manera:

Código
Código
  1. $( "#elboton" ).click(function() {
  2.  alert('123');
  3. });
  4.  

Ya se que hay otras formas de hacer esto pero para este problema necesito este ejemplo para explicarme mejor.

Lo que yo estoy buscando que entre ese lapso de tiempo desde que el usuario da un click hasta que se envié el alert muestre un texto o una imagen que sea la señal de que esta cargando dicha función es decir.

Para hacer la carga de una pagina ya es conocida que cuando este totalmente lista recién ahí mostrara el contenido mientras tanto estará mostrando un gif, un preloader o un progress como señal de cargando.

En ajax pasa algo similar mientras se carga la función ajax o el fichero estará mostrando un gif, preloader, o progress bar.

Quería saber si es posible hacer esto con una función como esta de al dar un click.

Gracias!


« Última modificación: 9 Septiembre 2019, 20:59 por #!drvy » En línea

engel lex
CoAdmin
***
Desconectado Desconectado

Mensajes: 15.347



Ver Perfil
Re: [Pregunta]: ¿Es posible hacer algo como esto?
« Respuesta #1 en: 25 Agosto 2019, 17:55 »

depende de cual funcion, si es ajax tiene campos para eso, si es simplemente un retraso (pausa) intencionada lo harias con un timeout, si es una funcion que tarda en calcular, es poner y quitar... así que aclara para poder ayudar :s


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
MiguelCanellas


Desconectado Desconectado

Mensajes: 623



Ver Perfil
Re: [Pregunta]: ¿Es posible hacer algo como esto?
« Respuesta #2 en: 25 Agosto 2019, 18:04 »

Básicamente es una función o evento jquery .change básicamente lo que hace es que al momento de que se cambia el valor de un input de tipo file es tomar una pre-visualización de la imagen que se intenta subir y ponerla en un div.

Y quería ver si era posible o necesario ponerle un preloader o una señal de que esta cargando.

Hace 3 días publique este tema: https://foro.elhacker.net/desarrollo_web/pregunta_progress_bar_o_preloader_al_subir_una_imagen-t498711.0.html

Sobre el mismo problema básicamente, al no recibir respuesta quise hacer este con otro ejemplo por ahí más básico y sencillo de entender haber si alguien me daba una mano con esto si fuera posible de hacer.
En línea

EdePC
Colaborador
***
Desconectado Desconectado

Mensajes: 1.393



Ver Perfil
Re: [Pregunta]: ¿Es posible hacer algo como esto?
« Respuesta #3 en: 25 Agosto 2019, 19:17 »

Saludos,

- Yo le eché un ojo a tu post anterior, pero se quedó en el tintero, me estaba documentando un poco y encontré dos métodos para mostrar una imagen previa, y por lo visto estás usando la forma menos eficiente, ese método lo denomino "Method Base64 IMG", es ineficiente porque convierte la imagen a formato Base64 y luego la muestra, este proceso demora y consume recursos, en especial RAM, si por ejemplo cargo una imagen de 100MB se tarda unos 40 segundos en mostrarla y consume al rededor de 1GB de RAM:

Código
  1. <input type="file" onchange="loadFile()">
  2. <img id="output" style="display: block;">
  3. <script>
  4.  // Base 64 Method, huge comsume RAM, CPU. Slow
  5.  function loadFile() {
  6.    var output = document.getElementById("output");
  7.    var reader = new FileReader();
  8.    reader.onload = function() {
  9.      output.src = reader.result;
  10.    }
  11.    reader.readAsDataURL(event.target.files[0]);
  12.  }
  13. </script>

- El otro método que es instantáneo es usando Blob, por lo visto crea una URL hacia la misma imagen original, por lo que solo tiene que cargarla en Ram y ya (en mi caso tarda 1 segundo en mostrar una imagen de 100MB):

Código
  1. <input type="file" onchange="loadFile()">
  2. <img id="output" style="display: block; width: 100%;">
  3. <script>
  4.  // Blob URL
  5.  function loadFile() {
  6.    var output = document.getElementById("output");
  7.    output.src = URL.createObjectURL(event.target.files[0]);
  8.  }
  9. </script>

- Para jQuery sería así:

Código
  1. <input type="file" onchange="loadFile()">
  2. <img id="output" style="display: block; width: 100%;">
  3. <script>
  4.  // Blob URL
  5.  function loadFile() {
  6.    $("#output").src = URL.createObjectURL(event.target.files[0]);
  7.  }
  8. </script>

- En este último caso no veo necesidad de poner un Pre-Loader, sin embargo puedes revisar las famosas Promesas de javascript para esperar tiempos de carga de funciones y esas cosas:
https://developer.mozilla.org/es/docs/Web/javascript/Guide/Usar_promesas
En línea

MiguelCanellas


Desconectado Desconectado

Mensajes: 623



Ver Perfil
Re: [Pregunta]: ¿Es posible hacer algo como esto?
« Respuesta #4 en: 25 Agosto 2019, 19:29 »

Muchas gracias, otra vez  jeje! voy a revisar eso, gracias por nonagésima vez jaja
En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.159


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: ¿Es posible hacer algo como esto?
« Respuesta #5 en: 25 Agosto 2019, 19:54 »

No te vale simplemente poner un tag vacio y editarlo con javascript? Y si quieres hacer algo usar onclick="funcionjs();" onload="...;" onerror="...;"

O calcularlo en onload en el body con la hora del sistema y un eventlistener al loaded también con la hora.
Comparas los strings y sabes el tiempo que pasó desde que se efecutó la función hasta que se terminó de cargar el documento.

No sé exactamente lo que quieres asique te dejo un link donde se explican varias posiblidades con ejemplos.
 https://javascript.info/onload-ondomcontentloaded


 
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines