Масонство Скрыть изображения до полной загрузки

Question

Я пытаюсь скрыть свои изображения масонства до тех пор, пока страница не закончит загрузку, так как в настоящее время изображения загружаются в длинную полосу слева от экрана, прежде чем организовать себя.

Я не могу заставить контейнер спрятаться, а затем показать, как только все остальное загружено.

Вот ссылка: http://inspiredworx-labs.com/sites/blg/

Вот мой сниппет (с комментарием код, который я пытался реализовать на скрыть/показать бит):

 <script> 
    $(window).load(function(){ 
      var $container = $('#masonry-container'); 
      // initialize 
      $container.masonry({ 
       //columnWidth: 60, 
       gutter: 6, 
       itemSelector: '.masonry-item' 
      }); 
    }) 

    /* 
      $('#masonry-container').hide(); 
      $container.imagesLoaded(function(){ 
       $('#masonry-container').show(); 
      })   
    */ 
    </script> 

Answer 1

Вы должны включать масонство экземпляр в своих изображениях imagesLoaded как так:

var $container = $('#masonry-container'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.masonry-item', 
     gutter: 6 
    }); 
}); 

Answer 2

Я не получаю все, что вы пробовали.

Но есть javascript библиотека, которая является «imagesLoaded». , который поможет вам я сделал это таким образом

// created a array with image and data 
var elemar = []; 
$.each(data, function(j,subData){ 

    var img = document.createElement('img'); 
    img.src = 'images.jpg'; 
    item.appendChild(img);       
    elemar.push(item); 
}); 

// loading div after image loaded 
imagesLoaded(elemar).on('progress', function(imgLoad, image) { 
     var item = image.img.parentNode;   
     container.appendChild(item);// container is an javascript , $('#containerdiv'), where all div will be publish 
     msnry.appended(item); // msnry intializaion 
     }); 
});