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

 

 


Tema destacado: Estamos en la red social de Mastodon


+  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 3,718 veces)
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
[Resuelto] [Pregunta]: ¿Es posible hacer algo como esto?
« en: 25 Agosto 2019, 17:39 pm »
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 pm por #!drvy » En línea
engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: [Pregunta]: ¿Es posible hacer algo como esto?
« Respuesta #1 en: 25 Agosto 2019, 17:55 pm »
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.
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: ¿Es posible hacer algo como esto?
« Respuesta #2 en: 25 Agosto 2019, 18:04 pm »
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
Moderador Global
***
Conectado Conectado

Mensajes: 2.159



Ver Perfil
Re: [Pregunta]: ¿Es posible hacer algo como esto?
« Respuesta #3 en: 25 Agosto 2019, 19:17 pm »
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
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: ¿Es posible hacer algo como esto?
« Respuesta #4 en: 25 Agosto 2019, 19:29 pm »
Muchas gracias, otra vez  jeje! voy a revisar eso, gracias por nonagésima vez jaja
En línea
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: ¿Es posible hacer algo como esto?
« Respuesta #5 en: 25 Agosto 2019, 19:54 pm »
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
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Sería posible que el Big Bang fuese algo así como esto? « 1 2 »
Foro Libre 		RevolucionVegana 15 6,646 Último mensaje 12 Noviembre 2016, 10:36 am
por Orubatosu
[Resuelto] [Pregunta]: ¿Como puedo realizar esto? « 1 2 »
PHP 		Leguim 10 6,494 Último mensaje 25 Abril 2020, 05:27 am
por sirefys
[Resuelto] [Pregunta]: ¿Como hacer que un timer me devuelva un valor?
Desarrollo Web 		Leguim 2 3,575 Último mensaje 14 Septiembre 2019, 16:52 pm
por Leguim
[Pregunta]: ¿algo como esto?
Desarrollo Web 		Leguim 2 2,972 Último mensaje 2 Marzo 2020, 08:15 am
por @XSStringManolo
[Pregunta]: ¿Una forma eficiente de hacer algo como esto?
Desarrollo Web 		Leguim 8 5,897 Último mensaje 17 Junio 2020, 08:10 am
por @XSStringManolo
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines