[Resuelto] [Pregunta]: ¿Es posible hacer algo como esto?

[Leguim]

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 (javascript) [Seleccionar] Expandir


$( "#elboton" ).click(function() {
 alert('123');
});


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!

[engel lex]

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

[Leguim]

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.

[EdePC]

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 (javascript) [Seleccionar] Expandir

<input type="file" onchange="loadFile()">
<img id="output" style="display: block;">
<script>
  // Base 64 Method, huge comsume RAM, CPU. Slow
  function loadFile() {
    var output = document.getElementById("output");
    var reader = new FileReader();
    reader.onload = function() {
      output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
  }
</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 (javascript) [Seleccionar] Expandir

<input type="file" onchange="loadFile()">
<img id="output" style="display: block; width: 100%;">
<script>
  // Blob URL
  function loadFile() {
    var output = document.getElementById("output");
    output.src = URL.createObjectURL(event.target.files[0]);
  }
</script>

- Para jQuery sería así:

Código (javascript) [Seleccionar] Expandir

<input type="file" onchange="loadFile()">
<img id="output" style="display: block; width: 100%;">
<script>
  // Blob URL
  function loadFile() {
    $("#output").src = URL.createObjectURL(event.target.files[0]);
  }
</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

[Leguim]

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

[@XSStringManolo]

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