complemento de carga diferida para cargar imágenes a medida que el usuario se desplaza?

Question

Me gusta mucho el plugin de carga diferida y estoy destripado porque no está funcionando en nuevos navegadores.

¿Hay alguna forma en que pueda escribir mi propio código que no cargue las imágenes debajo de la tapa hasta que el usuario se desplace?

<img _src="/fullscreen/img/You are everywhere 2.png" class='lazyLoad' /> 

jQuery('.lazyLoad').each(function(){ 
     var _elm= jQuery(this); 
     _elm.attr('src',_elm.attr('_src')); 

     //on DOM ready loop through each 
     //image with class=lazyLoad and add src attribute to it. 
}) 

Sería muy bueno si puedo conseguir este clavado, que es una lástima the appelsiini site no se admite por más tiempo.

Encontré un sitio que funciona en todos los navegadores http://haw-lin.com/ y está usando un script de plugin muy similar a http://www.appelsiini.net/projects/lazyload. No hay licencia de MIT y me resulta difícil de descifrar.

¿Qué jQuery image lazy load plugin puede recomendar?

Answer 1

La página de demostración de jQuery image lazy load plugin no parece funcionar para mí en FF3.6 en Mac. Estaba viendo las solicitudes HTTP con la pestaña Net de Firebug y pude ver todas las imágenes cargadas onload.

Puede consultar este plugin llamado JAIL que funciona perfectamente (aunque requiere algunos cambios de HTML). Sugiero especialmente mirar los ejemplos.

Answer 2

Si mira forks of jquery_lazyload in github, algunos de ellos address the issues con newer browsers.

Answer 3

Puede probar este plugin de jQuery escribí que utiliza los comentarios HTML a la carga perezosa cualquier bit arbitrarios de HTML, incluyendo imágenes:

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

He aquí un ejemplo:

<pre class=”i-am-lazy” ><!– 
    <img src=”some.png” /> 
–></pre> 

<pre class=”i-am-lazy” ><!– 
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div> 
–></pre> 

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script> 
<script type=”text/javascript” > 
$(document).ready(function() 
{ 
    $(’pre.i-am-lazy’).lazyLoad(); 
}); 
</script> 

Así que, básicamente, envuelve el contenido que desea cargar de forma diferida con una etiqueta de marcador de posición y Comentario HTML Cuando el marcador de posición se vuelve visible en la ventana gráfica, se reemplaza con la cadena HTML dentro del comentario.

Puede usar cualquier etiqueta para el marcador de posición, pero me gusta pre porque se muestra como 0 dimensión cuando solo hay un comentario dentro.