0

我正在使用砖石来加载大量图像，我对其进行了设置，以便图像逐渐加载（附加）而不是在页面上有大量空白。您可以在此处查看实时版本以帮助说明我的意思。

但是，由于图像正在加载，如果还有更多图像要加载，则不是很清楚。是否可以在底部附加一个 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;
    };
4

1 回答 1

1

也许您可以尝试其他方式在页脚之前的 div 中显示加载图像，如下所示

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

并将 css 给 divloader

#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 )加载图像时处理图像的位置之后

于 2014-06-27T09:07:35.257 回答