Question

我正在使用砌体加载大量的图像，我设置它以便图像逐渐加载（追加）而不是在页面上有大量的空白区域。你可以看到工作l ive version here来帮助表明我的意思。

然而，如果还有更多图像需要加载，图像加载的位置不是很清楚。是否可以在底部附加loader.gif以表示还有更多图像需要加载？然后，一旦加载了所有图像，loader.gif就会消失。

这是我的jquery：

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

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

    $.fn.masonryImagesReveal = function( $items ) {
        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 );
        });

        return this;
    };

这是我的HTML：

<div id="artistDetWrap" class="entry-content clearfix"></div>

<div id="images">
    <div class="artPost col-lg-6">
        <img width="1170" height="828" alt="dreams_FULL" class="attachment-full" src="myimgsrc.jpg">
    </div>  
</div>

更新

我在jquery中添加了计算图像。他们加载时都会加载一个加载类，所以这部分工作得很好。但是加载器在加载完全后不会隐藏。这是我的jquery：

$.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;
    };

Answer 1

也许你可以尝试其他方式从头开始在div之前显示div中的加载图像，如下所示

<div id="contentWrapper">
    <!-- Your Content -->
</div>
<div id="loader">
    <img src="/source/to/loadingimage.gif" />
</div>
<footer>
    <!-- Your Footer -->
</footer>

并将css提供给div loader

#loader { text-align:center }

并且当附加所有图像时，请调用

$('#loader').hide();

修改

计算首先隐藏的页面中的总图像数

var totalImage = $('.artPost').length;

在loaded函数中添加类$items.imagesLoaded().progress( function( imgLoad, image )以声明图像是否已经显示为

$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');
});

~~然后return this;~~ 检查总加载图像是否与类artPost的总图像相同，就像这样

if (totalImage == $('.loaded').length)    // if you have other element with loaded class, add more selector to $('.loaded')
    $('#loader').hide();

并将其放在$item.addClass('loaded');内$items.imagesLoaded().progress( function( imgLoad, image )内，每次加载图片时都会处理

砌体在底部添加一个装载器，以显示仍在加载更多图像

1 个答案:

修改