使用JQuery LazyLoad时，即使在实现imagesLoaded

问题描述

我正在尝试解决当我尝试引入JQuery LazyLoad时发生的同位素砌体网格布局的布局问题。如果未加载缓存（即私人浏览或使用ctrl + F5重新加载），则在Masonry网格中会出现空白。如果我正常地重新加载页面，空白将消失。

我在这里找到了许多答案，这些答案描述了使用imagesLoaded（）作为解决方案。问题在于这些用例没有包含包裹在图像周围的元素。

在我的情况下，网格布局由div元素组成，然后我试图将这些div中的图像延迟加载，以尝试加快页面加载速度。

我的实际标记比这更复杂（因为它是一个WordPress循环），但这是我的标记的简化版本

<div id="Grid" class="grid">
    <div class="item">
        <div class="isotope-img-wrapper">
            <img class="lazy" data-src="/path/to/image/image.jpg" />
        </div>
        <div class="text-wrapper">
            Lorem ipsum dolor sit amet,consectetur adipiscing elit.    
        </div>
    </div>
    <div class="item">
        <div class="isotope-img-wrapper">
            <img class="lazy" data-src="/path/to/image/image.jpg" />
        </div>
        <div class="text-wrapper">
            Lorem ipsum dolor sit amet,consectetur adipiscing elit.
        </div>
    </div>
    <div class="item">
        <div class="isotope-img-wrapper">
            <img class="lazy" data-src="/path/to/image/image.jpg" />
        </div>
        <div class="text-wrapper">
            Lorem ipsum dolor sit amet,consectetur adipiscing elit.    
        </div>
    </div>
</div>

这是空白的屏幕截图

Screenshot of whitespace layout problem

最后是同位素的JQuery实现。由于输入我介绍的函数时进行搜索，因此有点复杂。

jQuery(function ($) {
    // external js: isotope.pkgd.js

    // store filter for each group
    var buttonFilters = {};
    var buttonFilter;
    // quick search regex
    var qsRegex;

    // init Isotope
    var $grid = $('.grid ').isotope({
      itemSelector: '.item',// layoutMode : 'fitRows',masonry: {
        //columnWidth: 25
      },filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
        var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
        return searchResult && buttonResult;
      },});

    $('.filters').on( 'click','.button',function() {
      var $this = $(this);
      // get group key
      var $buttonGroup = $this.parents('.button-group');
      var filterGroup = $buttonGroup.attr('data-filter-group');
      // set filter for group
      buttonFilters[ filterGroup ] = $this.attr('data-filter');
      // combine filters
      buttonFilter = concatValues( buttonFilters );
      // Isotope arrange
        $grid.imagesLoaded().progress( function() {
            $grid.isotope();
        });
    });

    // use value of search field to filter
    var $quicksearch = $('.quicksearch').keyup( debounce( function() {
        document.getElementById("field_1").value = '';
      qsRegex = new RegExp( $quicksearch.val(),'gi' );
        $grid.imagesLoaded().progress( function() {
            $grid.isotope();
        });
    }) );

    var $topsearch = $('.topsearch').keyup( debounce( function() {
      qsRegex = new RegExp( $topsearch.val(),'gi' );
        $grid.imagesLoaded().progress( function() {
            $grid.isotope();
        });
    }) );

    // change is-checked class on buttons
    $('.button-group').each( function( i,buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click','button',function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
      });
    });

    // flatten object by concatting values
    function concatValues( obj ) {
      var value = '';
      for ( var prop in obj ) {
        value += obj[ prop ];
      }
      return value;
    }

    // debounce so filtering doesn't happen every millisecond
    function debounce( fn,threshold ) {
      var timeout;
      threshold = threshold || 100;
      return function debounced() {
        clearTimeout( timeout );
        var args = arguments;
        var _this = this;
        function delayed() {
          fn.apply( _this,args );
        }
        timeout = setTimeout( delayed,threshold );
      };
    }

});

您会在脚本中看到我尝试使用imagesLoaded的内容。我还尝试将所有断点的最小高度设置为图像包装类。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）