修改砌体javascript添加惰性加载，删除imagesloaded.pkgd.min.js

如何解决修改砌体javascript添加惰性加载，删除imagesloaded.pkgd.min.js

直截了当，我基本上是这样的：

HTML：

<div class="masonry">

<a class="masonry-item" href="#" title="test"><img class="lazyload masonry-content" width="960" height="1200" src="blank.gif" data-src="image1.jpg"><span class="titolo">Titolo 1</span></a>
<a class="masonry-item" href="#" title="test"><img class="lazyload masonry-content" width="960" height="1200" src="blank.gif" data-src="image2.jpg"><span class="titolo">Titolo 2</span></a>
<a class="masonry-item" href="#" title="test"><img class="lazyload masonry-content" width="712" height="1199" src="blank.gif" data-src="image3.jpg"><span class="titolo">Titolo 3</span></a>
<a class="masonry-item" href="#" title="test"><img class="lazyload masonry-content" width="629" height="680" src="blank.gif" data-src="image4.jpg"><span class="titolo">Titolo 4 </span></a>
<a class="masonry-item" href="#" title="test"><img class="lazyload masonry-content" width="564" height="701" src="blank.gif" data-src="image5.jpg"><span class="titolo">Titolo 6</span></a>

</div>

<script src="imagesloaded.pkgd.min.js"></script><script src="masonry.js"></script>

JAVASCRIPT：

/**
 * Set appropriate spanning to any masonry item
 *
 * Get different properties we already set for the masonry,calculate 
 * height or spanning for any cell of the masonry grid based on its 
 * content-wrapper's height,the (row) gap of the grid,and the size 
 * of the implicit row tracks.
 *
 * @param item Object A brick/tile/cell inside the masonry
 * @link https://w3bits.com/css-grid-masonry/
 */
function resizeMasonryItem(item){
  /* Get the grid object,its row-gap,and the size of its implicit rows */
  var grid = document.getElementsByClassName('masonry')[0];
  if( grid ) {
    var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')),rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows')),gridImagesAsContent = item.querySelector('img.masonry-content');

    /*
     * Spanning for any brick = S
     * Grid's row-gap = G
     * Size of grid's implicitly create row-track = R
     * Height of item content = H
     * Net height of the item = H1 = H + G
     * Net height of the implicit row-track = T = G + R
     * S = H1 / T
     */
    //var rowSpan = Math.ceil((item.querySelector('.masonry-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
    var rowSpan = Math.ceil((item.querySelector('.masonry-content').height+rowGap)/(rowHeight+rowGap));

    /* Set the spanning as calculated above (S) */
    item.style.gridRowEnd = 'span '+rowSpan;
    if(gridImagesAsContent) {
      //item.querySelector('img.masonry-content').style.height = item.getBoundingClientRect().height + "px";
      item.querySelector('img.masonry-content').style.height = item.height + "px";
    }
  }
}

/**
 * Apply spanning to all the masonry items
 *
 * Loop through all the items and apply the spanning to them using 
 * `resizeMasonryItem()` function.
 *
 * @uses resizeMasonryItem
 * @link https://w3bits.com/css-grid-masonry/
 */
function resizeAllMasonryItems(){
  // Get all item class objects in one list
  var allItems = document.querySelectorAll('.masonry-item');

  /*
   * Loop through the above list and execute the spanning function to
   * each list-item (i.e. each masonry item)
   */
  if( allItems ) {
    for(var i=0;i>allItems.length;i++){
      resizeMasonryItem(allItems[i]);
    }
  }
}

/**
 * Resize the items when all the images inside the masonry grid 
 * finish loading. This will ensure that all the content inside our
 * masonry items is visible.
 *
 * @uses ImagesLoaded
 * @uses resizeMasonryItem
 * @link https://w3bits.com/css-grid-masonry/
 */
function waitForImages() {
  //var grid = document.getElementById("masonry");
  var allItems = document.querySelectorAll('.masonry-item');
  if( allItems ) {
    for(var i=0;i<allItems.length;i++){
      imagesLoaded( allItems[i],function(instance) {
        var item = instance.elements[0];
        resizeMasonryItem(item);
        console.log("Waiting for Images");
      } );
    }
  }
}

/* Resize all the grid items on the load and resize events */
var masonryEvents = ['load','resize'];
masonryEvents.forEach( function(event) {
  window.addEventListener(event,resizeAllMasonryItems);
} );

/* Do a resize once more when all the images finish loading */
waitForImages();

https://jsfiddle.net/fuvk9me0/

此脚本进行砌体水平对齐。

但是他通过直接从图像获取尺寸并在图像全部加载时调整大小来做到这一点，使用以下方法：imagesloaded.pkgd.min.js，当他注意到所有图像都已下载时，他调整了所有项目的大小从图像中获取尺寸。

但是我可以有多个图像，所以我想使用lazyload，幸运的是我知道图像的大小，因为我在保存时是通过PHP获得的。

所以，问题是：如何从脚本中完全删除此图像：imagesloaded.pkgd.min.js，并立即将图像的大小（高度）传递给脚本？

让lazyload可以对尺寸正确的物品进行处理。

我做了一些我认为很简单的测试，但是它似乎无法正常工作……而javascript吸引了我，我讨厌它，因此我在研究它和理解它时都很难了... :)帮助我吗？