jQuery LazyLoad imágenes en un div oculto

Question

Tengo un montón de imágenes que están en un div oculto. El div se muestra cuando el usuario hace clic en algunos enlaces.

Me gustaría jQuery lazyload para ocultar estas imágenes hasta que se haga clic en el vínculo y se divierta el div oculto. Pero, si utilizo lazyload de acuerdo con la documentación, las imágenes siempre se cargan ya que el div oculto está en la ventana gráfica, presumiblemente.

¿Alguna idea?

Answer 1

Timo creo que no quiere de todos modos que carga las imágenes en el Reino antes de que los necesita. De alguna manera, este es un escenario clásico de usar ajax para cargar contenido.

propongo que vaya en ello como esto

$.fn.image = function(src, f) { 

     return this.each(function() { 

      var i = new Image(); 

      i.src = src; 

      i.onload = f; 

      this.appendChild(i); 

     }); 
    } 

    $(function() { 


     $('yourlink').click(function() { 

      $("#container").image("image.jpg", function() { 

       alert("image loaded"); 

      }); 
     }); 

    }); 

Answer 2

¿Realmente necesita el complemento de carga diferida? ¿Qué hay de reemplazar el contenido div con la imagen (s) al hacer clic en el enlace?

Algo así como:

<a href="link" onclick="show_images('div_id');">asdf</a> 

y

function show_images(id) { 
    $('#' + id).append('<img src="image1.jpg" /><img src="imagex.jpg" />'); 
} 

Answer 3

escribí un plugin de jQuery que utiliza los comentarios HTML para cargar ambas imágenes y cualquier HTML arbitrario dentro de un bloque de comentario.

Aquí está el artículo/docs: http://bit.ly/eXxK1c

Aquí está la página del plugin: http://plugins.jquery.com/project/LazyLoadOnScroll

Funciona así:

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

<pre class=”i-am-lazy” ><!– 
    <div>Whatever html you want lazy loaded</div> 
–></pre> 

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script> 
<script type=”text/javascript” > 

$(document).ready(function() 
{ 
    $(’pre.i-am-lazy’).lazyLoad(); 
}); 

</script> 

Cuando las etiquetas pre se hacen visibles en la ventana del navegador las etiquetas de marcador de posición se reemplazan con la cadena html dentro del comentario. Puede usar cualquier tipo de etiqueta como marcador de posición, no solo como pre, pero me gusta pre porque se muestra como 0 dimensión cuando hay un comentario adentro.

Answer 4

Puede probar esta solución también. Como primera imagen elasticidad adecuada atributo de intercambio de datos con su imagen para url

<div id="imgcontainer"> 
    <img data-swap="url/to/your/image1.jpg" class="swapimg" alt="image name"> 
    <img data-swap="url/to/your/image2.jpg" class="swapimg" alt="image name"> 
    <img data-swap="url/to/your/image3.jpg" class="swapimg" alt="image name"> 
</div> 

y luego usar jQuery para intercambiar atributo datos de intercambio en a src y lo que es realmente importante - comprobar si esta imagen no se muestra antes de usar la declaración if. Sólo por el rendimiento :)

var imgs = $('.swapimg'); 

$("#imgcontainer").click(function() { 
    if (imgs.attr("src") != imgs.attr("data-swap")) { 
     imgs.each(function() { 
      $(this).attr('src', $(this).attr("data-swap")); 
     }); 
    } 
});