Mostrar imagen de carga para imagenes

[tonydx16]

Quisiera saber cómo puedo hacer para que las imágenes carguen internamente sin que en el navegador se muestre la imagen de cargando.. por ejemplo esta página

http://www.cristalab.com/tutoriales/...oshop-c52947l/

Aquí carga rápido pero las imágenes cargan internamente..

Hay alguna página que ofrezca un script para esto?.. gracias

[3nr1c]

En todas las imagenes en vez de poner un src normal se escribe el codigo:

Código HTML:

<img src="imagen_carga.gif" data-src="url-imagen-real.jpg"/>
 

Luego en JavaScript:

Código Javascript:

window.onload = function(){
  $('img[data-src]').each(function(){
    var src = $(this).attr('data-src');
    $(this).attr('src',src).attr('data-src',null);
  });
};
 

Lo he hecho en jQuery pero también se podría hacer en JS nativo. Un saludo

[caricatos]

Hola:

Creo que te refieres a la precarga de imágenes, y consiste en programar el evento load de las imágenes o temporizar la consulta de su atributo complete, aunque dudo de la eficiencia de estos algoritmos...

De todos modos puedes ver algo en esta página: Imágenes, aparte de ver ese apartado, puedes ver el ejemplo en el "Proyector de diapositivas".

Saludos

[patilanz]

Iniciado por 3nr1c

En todas las imagenes en vez de poner un src normal se escribe el codigo:

Código HTML:

<img src="imagen_carga.gif" data-src="url-imagen-real.jpg"/>
 

Luego en JavaScript:

Código Javascript:

window.onload = function(){
  $('img[data-src]').each(function(){
    var src = $(this).attr('data-src');
    $(this).attr('src',src).attr('data-src',null);
  });
};
 

Lo he hecho en jQuery pero también se podría hacer en JS nativo. Un saludo

Hola :)

Me puedes decir como seria para hacer lo en javascript nativo porque no se como usar query ?

Gracias :)

[3nr1c]

Claro, sería algo así:

Código Javascript:

window.onload = function(){
  var images = [];
  try{
    images = document.querySelectorAll('img[data-src]');
  }catch(e){
    var all_images = document.getElementsByTagName('img');
 
    for( var i = 0, l = all_images.length; i<l; i++ ){
        var img = img[i],
        src = img.getAttribute('data-src');
 
        if( src ){
          images.push( img );
        }
    }
  }
 
  for( var i in images ){
    var img = images[i],
    src = img.getAttribute('data-src');
 
    img.src = src;
    img.setAttribute('data-src',null);
  }
}
 

No lo he probado, pero debería funcionar

Un saludo!

[djaevi]

Prueba esto:

Código Javascript:

window.onload=function() {
    var imagenes = document.getElementsByTagName("img");
        for (var i=0, x = imagenes.length; i < x; i++) {
            var src = imagenes[i].getAttribute("data-src");
            imagenes[i].setAttribute("src",src);
            imagenes[i].setAttribute("data-src",null);
        }
}
 

Use setAttribute en lugar de la notacion de puntos xq no creo que funcione imagenes[i].data-src = null

Saludos