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

Я новичок в 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>

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

Ответ 1

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

Что касается вашей проблемы со сложными изображениями: проблема заключается не в изображениях, не загруженных ни масонством. В вашем коде imagesLoaded ждет, пока все изображения не загрузятся, а затем пожары кладки. При загрузке всех изображений плагин масонства может правильно определять их размеры и помещать сетку. До этого браузер загружает изображения как обычно и отображает их в соответствии с определенным 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
    });    
  });
});

Ответ 2

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

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

Ответ 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 )
}

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