lazyload和Mashise+imagesloaded

qzlgjiam 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(293)

我如何将lazyload实现到我的砌体+图像加载布局？我有密码
html

<div class="masonry">
  <div class="masonry-sizer"></div>
    <div class="masonry-item">
        <img class="masonry-content" src="image1.png">
    </div>
</div>

var $masonry = $('.masonry').masonry({
  itemSelector: '.masonry-item',
  percentPosition: true,
  masonry: {
    columnWidth: '.masonry-sizer'
  }
});
$masonry.imagesLoaded().progress( function() {
  $masonry.masonry('layout');
});

我无法让它与任何lazyload插件一起工作。问题是它必须用imagesloaded实现，因为我没有特定的图像尺寸。我找到的所有解决方案都不起作用

JavaScript Html lazy-loading masonry imagesloaded

来源：https://stackoverflow.com/questions/68309575/lazyload-with-masonryimagesloaded

1条答案

按热度按时间

w8rqjzmb1#

我用lazysizes插件做了这个，虽然没有图片，但它现在应该可以正常工作了
html

<div class="masonry">
  <div class="masonry-sizer"></div>
    <div class="masonry-item">
        <img class="masonry-content lazyload" src="low_quality_image1.png" data-src="image1.png">
    </div>
</div>

$('.masonry').each(function(){
  var $module = $(this);
  var update = function(){
    $module.masonry('layout');
  };

  this.addEventListener('load', update, true);

  $module.masonry();
});

赞(0）回复(0）举报 2021-09-13

我来回答

lazyload和Mashise+imagesloaded

1条答案

相关问题

热门标签

最新问答