Combinación de LazyLoad y Jquery Masonry

Question

He intentado ensamblar herramientas de albañilería y moo perezosas sin embargo, parece que ambas no van muy bien juntas, aunque posiblemente podría ser porque soy un poco inútil en la codificación.

La mampostería funciona en this page.

Sin embargo, cuando trato de ponerlo junto con lazyload parece un desastre. ¿Alguien tiene alguna idea de cómo implementar ambos complementos juntos?

He pasado 6 días tratando de resolverlo y esta es mi esperanza final ¡ja!

Gracias

Answer 1

La razón es que la Masonería necesita conocer las dimensiones de la imagen con el fin de exponer los artículos correctamente. Sin embargo, LazyLoad demora la carga de la imagen hasta que la imagen esté en la ventana gráfica, lo que significa que la imagen no tendrá dimensiones (o tendrá las dimensiones de la imagen ficticia/de marcador de posición que haya configurado como img src).

Answer 2

Recientemente, tengo que resolver esto para uno de mis sitios web. Lo intenté de varias maneras y parece funcionar.

1. Primer método:

• de carga de mampostería en los artículos
• Pon un marcador de posición en todas las imágenes y utilizar lazyload en ellos
• Ahora, cuando cada imagen de devolución de llamada lazyload.load fuego , vuelva a cargar la albañilería -> una serie de mampostería ('recarga') [jsFiddle Actualizado con nuevas imágenes, más fácil de ilustrar el punto]

http://jsfiddle.net/7vEJM/8/

var $container = $('#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.item', 
     columnWidth: function(containerWidth){ 
      return containerWidth/12; 
     } 
    }); 
    $('.item img').addClass('not-loaded'); 
    $('.item img.not-loaded').lazyload({ 
     effect: 'fadeIn', 
     load: function() { 
      // Disable trigger on this image 
      $(this).removeClass("not-loaded"); 
      $container.masonry('reload'); 
     } 
    }); 
    $('.item img.not-loaded').trigger('scroll'); 
}); 

Este método es bueno, pero tiene una desventaja. El diseño de la red no puede ser mantenido igual desde el momento de la masonry.reload() depende del tiempo de carga de cada imagen (es decir, el que se supone que se va a cargar un principio sólo podría terminar más tarde)

2. Segundo método: Mira sitios como pinterest, creo que no sigue el primer método, porque tienen los cuadros de contenedor organizados incluso antes de cargar cualquier imagen, por lo tanto, lo que traté de lograr es mostrar solo los cuadros con la misma proporción que las imágenes. Los pasos son:

• pasar su dimensión imágenes (simplemente devuelve un JSON como {image1: [300,400],image2: [400,500]})
• Uso truco CSS para hacer caja div cambiar el tamaño acuerdo con contenedor.He encontrado ese truco here
• carga perezosa como normal, no hay necesidad de activar cualquier recarga ya que ahora, sin la imagen, las cajas son ALR dispuestas correctamente

http://jsfiddle.net/nathando/s3KPn/4/

var $container = $('#container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.item', 
     columnWidth: function(containerWidth){ 
      return containerWidth/12; 
     } 
    }); 
    $('.item img').lazyload({ 
     effect: 'fadeIn' 
    }); 
    $('.item img').trigger('scroll'); 
}); 

[Editado para agregue el jsfiddle para el segundo método]

Aviso:

• En este violín pongo manualmente la relación alto/ancho de cada imagen en 'relleno-inferior: xxx%' que debe pasar desde el código del servidor (consulte el paso 1)
• Agregado en un borde para hacer cajas visibles
• para ilustrar que las cajas serán dispuestos incluso cuando las imágenes no cargadas, intente uncomment /*display: none */ y comentario display: block para #container.fluid .item img

Saludos

Answer 3

he publicado la misma respuesta en otros mismos problemas artículo. Si tiene el problema de que las imágenes se superponen, encontré la solución en el siguiente sitio, aunque está en japonés.

http://www.webdesignleaves.com/wp/jquery/1340/

Esperamos que esto ayude.

El punto es el siguiente uso;

$('img.lazy').load(function(){ ... }) 

HTML

<div id="works_list"> 
<div class="work_item"> 
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt=""> 
<p>title 1</p> 
</div><!-- end of .work_item--> 
<div class="work_item"> 
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt=""> 
<p>title 2</p> 
</div><!-- end of .work_item--> 
.... 
</div><!-- end of #works_list -->  

jQuery

$("img.lazy").lazyload({ 
    effect: 'fadeIn', 
    effectspeed: 1000, 
    threshold: 200 
}); 

$('img.lazy').load(function() { 
    masonry_update(); 
}); 

function masonry_update() {  
    var $works_list = $('#works_list'); 
    $works_list.imagesLoaded(function(){ 
     $works_list.masonry({ 
      itemSelector: '.work_item',　 
      isFitWidth: true,　 
      columnWidth: 160 
     }); 
    }); 
}  

Answer 4

puede ser alguien tendrá problemas también, ayuda esperanza.

para que funcione con wordpress photoswipe-masonry theme es imposible sin la modificación del complemento.

siguiente está relacionado con esta modificación y acaba con mampostería

a) el uso lazyload datos originales = "XXX" atributo para establecer URL de la imagen. NO src. para que necesites colocar un marcador de posición. puede ser 1x1 píxel que se cargará sin lazyload.

b) este marcador de posición necesita cubrir TODO el espacio para una futura imagen de lazyloaded, O la mampostería hará que todas las imágenes sean visibles como vistas de lazyloading. es porque antes de las imágenes cargadas tiene un tamaño cero 0px x 0px. y todas las imágenes encajan en el área visible antes de cargarse. Lazyload cuenta todo como visible y carga todo.

a organizar todo el espacio para la futura imagen que necesita establecer

style = "width: xxpx; altura: xxpx;"

simplemente width = "XX" y height = "xx" no es suficiente

así imagen de marcador se convirtió como:

<img src="http:..1x1px" data-original="http://real_image" style="width:xxpx;height:xxpx;"> 

a continuación, aplicar de manera normal carga perezoso, y mampostería. en cualquier orden .

Importante - mampostería de actualización de ancho a su tamaño la columna, pero no la altura, por lo que si el tamaño de la columna = 50 px, entonces es necesario calcular Altura del marcador de posición

new_height = 50/actual_width * actual_height;

así que para wordpress tema necesita

$scaled_height =$options['thumbnail_width']/$full[1] * $full[2]; 

.....

    <img src="http://xxxx/1x1px.jpg" data-original='. $thumb[0] .' itemprop="thumbnail" alt="'.$image_description.'" style="width:'.$full[1].'px;height:'.$scaled_height.'px;" width="'.$full[1].'" height="'.$full[2].'"/> 

....

a continuación, añadir nuevas líneas de abajo init mampostería

 var reloading = false; 
        $.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',function(){ 



           \$('.msnry_item img').lazyload({ 
            effect: 'fadeIn', 
            //container: container, 
            threshold : 200, 
            skip_invisible : false, 
            failure_limit : 5, 
            load: function() { 
             if(! reloading) 
             { 
             reloading = true; 
             setTimeout(function(){ 
               container.masonry('reload'); 
               reloading = false; 
             }, 500); 

            } 
            } 
           }); 

        }); 

Answer 5

la respuesta de softk5 no funcionaba para mí y causar congelamiento en la mayor parte del navegador. Aquí está mi siguiente código y funciona para mí.

jQuery(document).ready(function(){ 
    jQuery("img.lazy").lazyload({ 
     effect: 'fadeIn', 
     effectspeed: 1000, 
     threshold: 200, 
     load:function(){ 
      var $container = jQuery('.is_masonry'); 
      $container.masonry({ 
      }).imagesLoaded(function() { $container.masonry(); }); 

     } 
    }); 

});