Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Leguim en 1 Septiembre 2019, 21:52 pm



Título: [Resuelto] [Pregunta]: ¿Mostrar pre-loader mientras carga una imagen?
Publicado por: Leguim en 1 Septiembre 2019, 21:52 pm
Buenos días!
Anduve buscando la manera de mostrar un pre-loader (gif de carga) mientras una imagen no carga y sólo cuando cargo al 100% mostrar dicha imagen, ya que si no la imagen al cargar la pagina se va a ir mostrando por partes primero muestra la parte de arriba de la imagen y después hacia abajo. Es decir  por trozos y no me gusta como queda eso.

Busque en internet pero me aparecen resultados de como mostrar un pre-loader o gif de carga pero mientras la pagina no cargo completamente. Basicamente es similar pero para las imagenes que llamo a través de php que estan en mi base de datos.

Gracias.


Título: Re: [Pregunta]: ¿Mostrar pre-loader mientras carga una imagen?
Publicado por: engel lex en 1 Septiembre 2019, 22:03 pm
esto es un poco mas complicado que un simple loader...

tendrías que ir leyendo la trama de bits y mostrandola...

esto dependerá del formato, no necesariamente las imagenes son pixeles en orden, pueden ser tramas interlazadas (ej. donde primero vienen las lineas pares y luegos las impares) pueden ser de resolucion progresiva (la imagen viene en baja calidad y cada lote de bits siguiente le suma calidad) o puede ser por componentes (donde los primeros bits son la luminosidad, los siguientes saturación, tinte y transparencia), incluso puede ser mas complejo (por ejemplo compresion sin perdida, puede necesitar todo el contenido antes de descomprimir, ya que no es un proceso lineal siempre)

asi que tienes que revisar que tus fotos estén en el formato correcto, si lo estan, probablemente el mismo navegador se haga cargo al poner el src en un img


Título: Re: [Pregunta]: ¿Mostrar pre-loader mientras carga una imagen?
Publicado por: Leguim en 1 Septiembre 2019, 22:59 pm
Era esto lo que quería (pude encontrar algo): https://platzi.com/tutoriales/1099-fundamentos-javascript-2017/1772-pre-cargar-imagenes-con-javascript-gif-preloader-muy-sencillo/

pero esta a medias ya que no se como aplicarlo para imagenes que llamo desde una base de datos con php


Título: Re: [Pregunta]: ¿Mostrar pre-loader mientras carga una imagen?
Publicado por: engel lex en 1 Septiembre 2019, 23:21 pm
disculpa habia entendido justo lo contrario

para esto es simple basicamente el esquema es (asumiendo que usas jquery)

Código
  1. function cargar_imagen(imagen){
  2.  var contenedor = $("#contenedor_imagen"); //asumiendo que esto es un div con ese id
  3.  
  4.  contenedor.html("<img id='precarga' src='precarga.gif'><img id='nueva_imagen'> ");
  5.  
  6.  $("#nueva_imagen").hide(); //oculto esto
  7.  $("#nueva_imagen").attr('src',imagen); //le paso el link e la imagen
  8.  
  9.  $("#nueva_imagen").on("load", function(){  //cuando la imagen se haya cargado
  10.  
  11.    $("#precarga").hide(); //oculto esto
  12.    $("#nueva_imagen").show(); //muestro la imagen cargada
  13.  
  14.  });
  15. }

no lo probe solo lo hice de mente, puede tener tener algun error, pero en general deberia solucionar tu problema


Título: Re: [Pregunta]: ¿Mostrar pre-loader mientras carga una imagen?
Publicado por: Leguim en 2 Septiembre 2019, 01:35 am
Gracias!