[Resuelto] [Pregunta]: ¿Mostrar pre-loader mientras carga una imagen?

[Leguim]

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.

[engel lex]

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

[Leguim]

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

[engel lex]

disculpa habia entendido justo lo contrario

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

Código (javascript) [Seleccionar] Expandir


function cargar_imagen(imagen){
  var contenedor = $("#contenedor_imagen"); //asumiendo que esto es un div con ese id
 
  contenedor.html("<img id='precarga' src='precarga.gif'><img id='nueva_imagen'> ");
 
  $("#nueva_imagen").hide(); //oculto esto
  $("#nueva_imagen").attr('src',imagen); //le paso el link e la imagen

  $("#nueva_imagen").on("load", function(){  //cuando la imagen se haya cargado
   
    $("#precarga").hide(); //oculto esto
    $("#nueva_imagen").show(); //muestro la imagen cargada

  });
}

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

[Leguim]

Gracias!