¿Detener la carga de imágenes con javascript (lazyload)?

Question

Estoy tratando de detener la carga de imágenes con javascript en dom listo y luego iniciar la carga cuando lo desee, una carga llamada lenta de imágenes. Algo como esto:

 

$(document).ready(function() { 
    var images = $('img'); 
    $.each(images, function() { 
    $(this).attr('src', ''); 
    }); 
}); 
 

Esto no funciona (probado en ff3.5, safari 3-4). Las imágenes se cargan de todos modos, no lo entiendo.

Por ejemplo, este complemento, www.appelsiini.net/projects/lazyload, está haciendo exactamente lo mismo, eliminando el atributo src en la carga de la página.

¿Qué me falta?

EDITAR: He añadido una página de prueba aquí: http://dev.bolmaster2.com/dev/lazyload-test/ Primero elimino por completo el atributo src, luego de 5 segundos lo agrego con la imagen original. Todavía no funciona, al menos Firebug dice que las imágenes se cargan al inicio, ¿es Firebug para confiar?

Answer 1

Creo que el problema es que está vaciando el atributo 'img', no el 'src'.

Si está probando esto en una página local, entonces sus imágenes locales pueden estar cargando demasiado rápido. O tal vez se toman directamente de la memoria caché del navegador. Intente verificar si la imagen ya está cargada antes de vaciar su 'src'.

Answer 2

try removeAttr ("src"); como en http://www.appelsiini.net/projects/lazyload

$(document).ready(function() { 
    var images = $('img'); 
    $.each(images, function() { 
    $(this).removeAttr("src"); 
    }); 
}); 

Si aún no está funcionando. Comprueba esto.cargado: tal vez se carguen demasiado rápido.

Answer 3

No sé si ha escrito mal en la pregunta, pero el atributo que debe establecer en una cadena vacía es "src" no "img". Prueba esto:

$(document).ready(function() { 
    var images = $('img'); 
    $.each(images, function() { 
    $(this).attr('src', ''); 
    }); 
}); 

Answer 4

Creo que su problema es que se está ejecutando el código dentro de $ (document) ready, que se llama cuando el documento esté listo - es decir. cuando está completamente cargado, incluidas las imágenes. El complemento LazyLoad al que vinculó no usa $ (document) .ready, y el script se coloca en el encabezado, por lo que se ejecuta antes/mientras la página se carga en lugar de después.

Answer 5

Sugiero usar el complemento Jquery Lazyload para esto. Hace exactamente lo que quieres.

http://www.appelsiini.net/projects/lazyload

Answer 6

que tenían el mismo problema al poner la carga de la imagen en el caso de la libración mi imagen en miniatura, en el IE provoca un "desbordamiento de pila" al desplazar la imagen en miniatura.
Pero ahora está resuelto. Este código salvó mi día:

$(document).ready(function() { 
    var images = $('img'); 
    $.each(images, function() { 
    $(this).removeAttr("src"); 
    }); 
}); 

Answer 7

$(document).ready(function() { 
    var images = $('img'); 
    $.each(images, function() { 
     $(this).attr('src', ''); 
    }); 
}); 

Esto no va a funcionar porque jQuery está siendo llamado después de la página se ha cargado en:

$(document).ready()

todo este código haría estar haciendo es eliminar el valor src después de que la imagen ya ha sido llamada desde el servidor.

Answer 8

Si su objetivo es evitar que el servidor cargue las imágenes, borrar el atributo "src" no funcionará cuando se ejecute en document.ready (al menos no siempre, intente descargar el html de pinterest por ejemplo y agregue su script al html guardado - verá que el navegador solicitará las imágenes desde el servidor antes de se borra el src).

En su lugar, puede intentar usar el mismo código (o mejor, sin jQuery, para asegurarse de que funcione lo más rápido posible) colocándolo en la sección "cabeza" dentro de un loop setInterval que borrará el "src" atributo de todas las imágenes tan pronto como estén presentes las etiquetas (antes de que se encienda el documento jQuery listo).

Ejemplo:

eliminar las imágenes sin jQuery:

function removeImagesBeforeTheyAreRequested(options) { 
    var images = document.getElementsByTagName('img'); 
    for (var i = 0; i < images.length; i++) { 
    var orgSrc = images[i].src; 
    images[i].removeAttribute('src'); 
    } 
} 

fuego este código en la sección "cabeza", antes de que el cuerpo está listo (básicamente controlar la existencia de etiquetas img):

var timer = setInterval(function() { 
    removeImagesBeforeTheyAreRequested(); 
}, 1); 

dejar de tratar de buscar imágenes después de 3 segundos:

setTimeout(function() { clearInterval(timer); }, 3000); 

Tenga en cuenta que es posible que desee verificar si las imágenes se almacenan en caché antes de eliminar su atributo "src" (el navegador cargará realmente rápidamente y no tiene sentido eliminar su "src" con el fin de eliminar la carga del servidor ya que no se solicitan desde el servidor de nuevo).

Answer 9

Con JavaScript lo haces así.

var imagesArray = document.querySelectorAll('img'); 

for(var i=0; i<imagesArray.length; i++) { 
    imagesArray[i].src = ''; 
} 

Considera la posibilidad de utilizar Vanilla Javascript primero.