Использование кладки с загруженными изображениями

Question

Я новичок в JS и надеюсь, что эти вопросы не кажутся слишком глупыми.

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

Мой код:

$(document).ready(function() {

    var $container = $('#post-area');
    $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector : '.box',
            columnwidth: 300,
            gutter: 20,
            isFitWidth: true,
            isAnimated: !Modernizr.csstransitions
        });    
    });
});

Я также получаю эту ошибку Firebug:

TypeError: EventEmitter is not a constructor
ImagesLoaded.prototype = new EventEmitter();

Я загружаю изображения в формате js вот так в конце моего сайта (я не смог найти никакой информации, если загруженные изображения уже включены в кладку или нет, некоторые писали, что она больше не включена - сбивает с толку):

<script src="http://www.domainname.com/js/imagesloaded.js"></script>

Я был бы очень рад, если бы кто-нибудь мог мне помочь. И скажите мне, является ли загружаемый файл подходящим плагином для решения этой проблемы!

Answer 1

imagesLoaded не включен в Masonry, поэтому вы должны использовать отдельный плагин. Я бы порекомендовал использовать скомпилированную версию.min.

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

Одним из возможных решений является скрытие элементов по умолчанию, а затем fadein, пока imagesLoaded подтверждает, что загруженные изображения:

$(document).ready(function() {

  var $boxes = $('.box');
  $boxes.hide();

  var $container = $('#post-area');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();

    $container.masonry({
        itemSelector : '.box',
        columnwidth: 300,
        gutter: 20,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransitions
    });    
  });
});

Answer 2

Другое решение - инициализировать Masonry внутри $(window).load() вместо $(document).ready(). Это вызовет Masonry после того, как все материалы на странице загружены - изображения, шрифты, внешние скрипты и таблицы стилей и т. Д.

$(window).load(function(){
    $('#container').masonry({
        // options...
    });
});

Answer 3

Устанавливать

npm install masonry-layout --save

npm install imagesloaded --save

Тогда варианты Vanilla JS будут

'use strict'

const Masonry = require('masonry-layout')
const imgloaded = require('imagesloaded')
const elem = document.querySelector('.grid')
var imgLoad = imgloaded( elem )
    function onAlways() {
        const msnry = new Masonry( elem, {
            // options
            columnWidth: '.grid-sizer',
            // do not use .grid-sizer in layout
            itemSelector: '.grid-item',
            percentPosition: true,
            gutter: 10
        })
    // console.log('all images are loaded')
}
if (elem) {
    // bind with .on()
    imgLoad.on( 'always', onAlways )
    // unbind with .off()
    // imgLoad.off( 'always', onAlways )
}

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