Jquery Masonary demora no carregamento

[Helison Santos 0]

Bom dia, Galera, fiz a configuração do plugin jquery.masonary nesse site www.joaocalazans.com, porém quando acesso as galerias tenho uma lentidão no carregamento das imagens que uso plugin.

 

Minha chamada do plugin ficou assim, tenho que atribuir mais alguma coisa?

<script type="text/javascript">
$(function(){
  $('#fotos').masonry({
	itemSelector: '.gridfotos',
	isAnimated: true
  });
  $('#fotos').imagesLoaded( function() {
     $('#fotos').masonry({
	itemSelector: '.gridfotos',
	isAnimated: true
     });
  });
});
</script>

E o HTML mais ou menos assim:

<ul id="fotos">
	<li class="gridfotos">
		<a href="uploads/produtos/<?= $ln['img']; ?>" class="fancybox" rel="galeria"> 
			<img src="uploads/produtos/<?= $ln['img']; ?>" alt="Estilista João Calazans • Moda Festa e vestidos sob medida.">
		</a> 
	</li>
</ul>

[William Bruno 1501]

Cara.. acho q vc não deveria chamar o plugin 2 vezes. Acho q isso basta:

<script type="text/javascript">
$(function(){
  $('#fotos').imagesLoaded( function() {
     $('#fotos').masonry({
	itemSelector: '.gridfotos',
	isAnimated: true
     });
  });
});
</script>

[Helison Santos 0]

Beleza William,
No site do desenvolvedor está da forma que coloquei, pois parece que no load das imagens o plugin tem um especie de bug e não carrega a galeria de forma correta, mais vou testar só com a sua sugestão.

[Helison Santos 0]

Cara.. acho q você não deveria chamar o plugin 2 vezes. Acho q isso basta:

<script type="text/javascript">
$(function(){
  $('#fotos').imagesLoaded( function() {
     $('#fotos').masonry({
	itemSelector: '.gridfotos',
	isAnimated: true
     });
  });
});
</script>

 

Funciona somente com as duas funções/chamadas :( quando retiro uma as imagens perdem o posicionamento, no load da página e ficam em uma linha vertical.

[Marlon Pacheco 132]

Cara, acho que o problema está no tamanho das imagens e no fato de você redimensioná-las via CSS.

Não sei como você está fazendo o upload, mas há componentes PHP que podem redimensionar as suas imagens para que elas não fiquem tão grandes.

Um exemplo que encontrei é um foto com 800 x 1202. Dificilmente alguém vai ter 1202 de altura em um monitor ou tela de celular (não considerando telas de alta densidade). Você poderia limitar a altura das fotos em 600px e talvez criar um thumb menor para o carregamento ficar mais rápido.

 

P.S. Agora que eu vi. Coloca todos os scripts JS no final da página, antes do fechamento do body. Assim o DOM vai renderizar completamente antes de aplicar os scripts.

[Helison Santos 0]

Cara, acho que o problema está no tamanho das imagens e no fato de você redimensioná-las via CSS.

Não sei como você está fazendo o upload, mas há componentes PHP que podem redimensionar as suas imagens para que elas não fiquem tão grandes.

Um exemplo que encontrei é um foto com 800 x 1202. Dificilmente alguém vai ter 1202 de altura em um monitor ou tela de celular (não considerando telas de alta densidade). Você poderia limitar a altura das fotos em 600px e talvez criar um thumb menor para o carregamento ficar mais rápido.

 

P.S. Agora que eu vi. Coloca todos os scripts JS no final da página, antes do fechamento do body. Assim o DOM vai renderizar completamente antes de aplicar os scripts.

 

Considerarei suas recomendações, na verdade o site ainda não está completo. Valeu pelo P.S. eu sei que é o correto a fazer mas sempre esqueço e no corre-corre do dia, coloco lá em cima mesmo :(

 

Caso tenha um resultado satisfatório posto aqui.