Masonry и imagesLoaded: как заставить срабатывать Masonry в момент, когда определены размеры изображений?

Question

[Владимир Кулеш]

На сайте Masonry приведены два примера работы с imagesLoaded:
1. Сразу загружаются изображения, потом срабатывает masonry.
2. Срабатывает masonry, загружаются изображения, повторно срабатывает masonry.

В первом случае до загрузки всех изображений мы видим "разобранную" сетку, во втором - наслоение миниатюр друг на друга. И лишь после загрузки всех изображений все становится на свои места.

Подскажите, пожалуйста, как сделать так, чтобы masonry срабатывал в момент, когда определены размеры изображений, а не когда загружены все изображения?

Comments

[Владимир Кулеш]

Код того, что есть на данный момент.

Answer 1

[Codebaker]

Там же, в примерах ниже: Iteratively reveal items after each image is loaded. Оно?

Comments

[Владимир Кулеш]

Наверное, не совсем то. Объясню на первом попавшемся примере: demo.themebeans.com/?theme=Grille . При загрузке видим "разобранную" сетку пока не загрузятся все картинки. Хотелось бы видеть готовую сетку в которую загружаются изображения. На примере можно заметить, что размеры картинок определяются раньше, чем они загружаются, вот в этот момент и хотелось бы активировать masonry.

Answer 2

[Codebaker]

Ок, немного изменим пример:

function randomInt( min, max ) {
  return Math.floor( Math.random() * max + min );
}

function getItem() {
  var width = randomInt( 150, 400 );
  var height = randomInt( 150, 250 );
  var imageUrl = 'http://lorempixel.com/' + width + '/' + height + '/nature';
  return imageUrl;
}

function preloadimages(arr) {
    var newimages = [], loadedImagesCounter = 0;
    var arr = (typeof arr != "object")? [arr] : arr
    var callback = function() {}
    function imageloadpost() {
        loadedImagesCounter++
        if (loadedImagesCounter === arr.length){
            // alert("All images have loaded (or died trying)!")
            callback(newimages);
        }
    }
    for (var i = 0; i < arr.length; i++) {
        newimages[i] = new Image();
        newimages[i].src = arr[i];
        newimages[i].onload = function() {
            imageloadpost()
        }
        newimages[i].onerror = function() {
        	imageloadpost()
        }
    }
    return {
        done: function(cb) {
            callback = cb || callback
        }
    }
}
 
var totalImages = 10;
var imageNames = [];
for (var imgIndex=0; imgIndex < totalImages; imgIndex++)
{
     imageNames.push(getItem());
}

preloadimages(imageNames).done(function(images) {
	// images are loaded

	// call Mansory here
	console.log('Loaded images: ' + images.length);
	for (var i = 0; i < images.length; i++)
	{
		console.log('Image: src=' + images[i].src + ', ' + images[i].width + 'x' + images[i].height);
	}
})

Comments

[Владимир Кулеш]

А можете на примере показать, что-то не могу сообразить куда и как мне это применить.
Вот, как у меня выводится сетка: codepen.io/vakulesh/pen/DcApr
В шаблоне используется Бутстрап. Список записей выводится Бутсраповскими thumbnail'ами, в них - картинка, название, описание статьи. Картинки все 750х500пикселей.

[Codebaker]

Код смотрели? Комментарий оставил же: call Mansory here.
В консоль список картинок выдает, попробуйте подключить скрипт и запустите.

[Владимир Кулеш]

Смотрел, пробовал, вертел и с комментарием догадался, но как применить в моем случае - не пойму, знаний в данной сфере катастрофически мало.