Estoy usando el complemento lazyload para cargar todas las imágenes en mi web. Cada una de estas imágenes está contenida en un div con también una descripción y botones.

<div class="container">
<h5>blablabla</h5>
<img class='lazy' data-original="http://example.gif" src="">
<form method="post" action='#'>
  <input type="submit" value='add'>
  ...
</form>
</div>

<div class="container">
....
</div>

...

Está funcionando, pero me gustaría ocultar todo el div hasta que su imagen esté completamente cargada, desafortunadamente no pude encontrar ninguna pista sobre cómo lograrlo. ¿Es posible?

Editar: Sigo sin poder hacerlo funcionar, así que hice un jsfiddle con la esperanza de que pudieras señalarme lo que va mal allí. Si comenta que la carga diferida display:none funciona con todas las imágenes, de lo contrario los divs permanecen siempre ocultos.

Solución

1
javier_domenech 2 ene. 2017 a las 19:08

1 respuesta

La mejor respuesta

Puede hacer que los elementos img estén ocultos de forma predeterminada y luego enlazar con el evento load() de las imágenes para mostrarlos:

.container img { visibility: hidden; }
.container img.show { visibility: visible; }
$('.container img').on('load', function() {
    $(this).addClass('show');
});

Ejemplo de trabajo

1
Rory McCrossan 3 ene. 2017 a las 12:55
Mmm que no es lazyloading todo el div, solo la imagen: jsfiddle.net/9aopngmr/5 (I he agregado un tiempo de espera para que podamos notarlo bien) Por cierto, me indicó la dirección correcta: jsfiddle.net / 9aopngmr / 4 Por favor, considere actualizar el ejemplo de trabajo para que pueda aceptar su respuesta ... ¡y muchas gracias!
 – 
javier_domenech
3 ene. 2017 a las 13:19
Encantado de ayudar. Además, solo las imágenes se cargan de forma diferida porque solo seleccionó img.lazy al inicializar el complemento de carga diferida.
 – 
Rory McCrossan
3 ene. 2017 a las 13:24
Por favor, enséñeme lo que debería haber seleccionado en su ejemplo.
 – 
javier_domenech
3 ene. 2017 a las 13:26
No estoy seguro de lo que está tratando de hacer, ya que el concepto de carga diferida solo se aplica a las imágenes.
 – 
Rory McCrossan
3 ene. 2017 a las 13:30
Oh, verifique la diferencia entre jsfiddle.net/9aopngmr/5 y jsfiddle.net/9aopngmr/4 Estoy mostrando el div solo cuando se carga la imagen. Por cierto, lo tengo y gracias a ti.
 – 
javier_domenech
3 ene. 2017 a las 13:31