Добавление изображений к содержимому и перезагрузка каменной кладки

Функция jQuery .load() поможет решить проблему.

Попробуйте со следующим кодом,

var totalImage = 0, imageCount = 0;
$.ajax({
    type: "GET",
    url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file
    dataType: "xml",
    success: function(xml) {
        totalImage = jQuery(xml).find("img").length;
        jQuery(xml).find('img').each(function(i) {
           var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images
           var url = jQuery(this).attr('src');
           var alt = jQuery(this).attr('alt');

        elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'"/></div>';

    });

    $('.content').append(elements).shuffle();

    $('.image-div img').load(function() {
      imageCount++;
      if(totalImage == imageCount){
        $('.content').masonry('reload');
      }
});

Я создал переменные totalImage и imageCount. В событии загрузки изображения я проверил, что все изображения загружены. Если totalImage и imageCount одинаковы, это означает, что загрузка завершена, тогда я вызвал функцию masonry('reload').

Похоже, Masonry работает с DOM до полной загрузки изображений. Используйте метод imagesLoaded, поставляемый с Masonry, чтобы исправить это:

Редактировать. Загружает изображения фрагментами, каждый фрагмент становится видимым, когда его изображения полностью загружены:

CSS

.hidden {
    display: none;
}

JavaScript

/*
 * Splits an array into subarrays of length "len".
 *
 * see: http://stackoverflow.com/a/11764168/159570
 */
function chunk(arr, len) {
    var chunks = [];
    var i = 0;
    var n = arr.length;
    while (i < n) {
        chunks.push(arr.slice(i, i += len));
    }
    return chunks;
}

var chunkSize = 10;    // images per chunk
var $content = $('.content').masonry();
$.ajax({
    type: "GET",
    url: "/galleries/_archive/PhotoGallery.xml",
    dataType: "xml",
    success: function(xml) {
        var allImages = $(xml).find('img').get();
        var imageArrayChunks = chunk(allImages, chunkSize);
        $.each(imageArrayChunks, function(i, imageArray) {
            var elements = '';
            $.each(imageArray, function(j, image) {
                var location = "/galleries/_archive/";
                var $image = $(image);
                var url = $image.attr('src');
                var alt = $image.attr('alt');
                var index = i*j + j;    // original unchunked index
                elements += '<div class="image-div hidden"><img class="round'+index+'" src="'+location+url+'" alt="'+alt+'"/></div>';
            });
            $content.append(elements).shuffle();
            $content.imagesLoaded(function(images) {
                $content.masonry('reload');
                $(images).parent().removeClass('hidden');
            });
            console.log('Chunk #'+i+' loaded...');
        });
    }
});

Если вы можете сохранить высоту и ширину каждого элемента в вашем файле XML. Вы можете использовать эти размеры в своем операторе добавления. Это позволит masonry работать БЕЗ ожидания загрузки изображений в браузере. Таким образом, браузеру не придется «переформатировать» макет после загрузки изображений, что приведет к более плавному восприятию (меньше «дерганий» или подпрыгивания) и более быстрой воспринимаемой загрузке страницы.

Кроме того, его чертовски просто реализовать (особенно если учесть, что вам все равно нужно каким-то образом сгенерировать файл XML).

var elements = '';

$.ajax({
    type: "GET",
    url: "/galleries/_archive/PhotoGallery.xml", // replace with absolute URL of your gallery's xml file
    dataType: "xml",
    success: function(xml) {
        jQuery(xml).find('img').each(function(i) {
           var location = "/galleries/_archive/"; // replace with absolute path to the directory that holds your images

           var that= jQuery(this),
               url = that.attr('src'),
               alt = that.attr('alt'),
               h   = that.attr('height'),
               w   = that.attr('width');

        elements+= '<div class="image-div"><img class="round'+i+'" src="'+location+''+url+'" alt="'+alt+'" height="'+h+'" width="'+w+'"/></div>';

    });

    $('.content').append(elements).shuffle().masonry();
    }
 });

Для развлечения:

CSS

.content img{
     opacity:0;
     -moz-transition:opacity 1s;
     -webkit-transition:opacity 1s;
     transition:opacity 1s;
}

.content .loadedImg{
     opacity:1;
}

JS

$('.content').on('load', 'img', function(){
     $(this).addClass('loadedImg');
});

Теоретически изображения теперь будут очень красиво исчезать, как только они полностью загрузятся в браузерах с поддержкой css3.