砌体和Imagesloaded不显示文本div或视频

Question

我有一个非常沉重的图像网站，所以我使用ImagesLoaded，它对图像非常有用。然而，在图像中我还有一些引用和视频与项目并列。遗憾的是，报价和视频无法显示，因为它们中没有图像。

我目前正在做的是为每个视频或文本字段添加1px X 1px图像以便加载它，但是这不能很好地工作，因为砖石认为它只有1px它总是想把它放在第一位。我想知道是否有更好的解决方案吗？

以下是我的代码：

$( function() {
        var $container = $('#artistDetWrap').masonry({
            columnWidth: 1,
            gutter: 0,
            itemSelector: '.artPost'
        });

        // reveal initial images
        $container.masonryImagesReveal( $('#images').find('.artPost') );
    });

    $.fn.masonryImagesReveal = function( $items ) {
        var totalImage = $('.artPost').length;
        var msnry = this.data('masonry');
        var itemSelector = msnry.options.itemSelector;
        // hide by default
        $items.hide();
        // append to container
        this.append( $items );

        $items.imagesLoaded().progress( function( imgLoad, image ) {
            // get item
            // image is imagesLoaded class, not <img>, <img> is image.img
            var $item = $( image.img ).parents( itemSelector );
            // un-hide item
           $item.show();
            // masonry does its thing
            msnry.appended( $item );
            $item.addClass('loaded');
            if (totalImage == $('.loaded').length)    // if you have other element with loaded class, add more selector to $('.loaded')
        $('#loader').hide();
        });


        return this;
    };