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

disculpa habia entendido justo lo contrario

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

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