使用瀑布流插件masonry，图片未加载完就会出现重叠现象，怎么解决？

Question

//使用了imagesLoaded插件来判断图片是否加载完毕
var $grid = $('ul#grid');
$grid.imagesLoaded().done( function(instance) {
    // 加载完成
    $grid.masonry({
        // fitWidth: true,
        // initLayout: false,
        itemSelector: '.item',
        columnWidth: '.item',
        percentPosition: true,
    });
})

isImgLoad(function () {
    $grid.masonry("layout");
});

// 判断图片加载的函数
var t_img;
var isLoad = true;
function isImgLoad(callback) {
    $('.img').each(function () {
        if (this.height === 0) {
            isLoad = false;
            return false;
        }
    });
    if (isLoad) {
        clearTimeout(t_img);
        callback();
    } else {
        isLoad = true;
        t_img = setTimeout(function () {
            isImgLoad(callback);
        }, 500);
    }
}

//AJAX滚动加载部分
var $boxes = $(data); // data为数据
$grid.append($boxes).masonry("appended", $boxes, true);
//追加元素
$grid.imagesLoaded().done( function(instance) {                    isImgLoad(function () {                                            $grid.masonry();
    })
})

代码如上，当图片没有加载完成的时候，列表的图片就会重叠在一起。但我用网上搜来的判断图片加载的函数，好像没啥作用？用图片加载插件，CONSOLE.LOG显示都是加载完成，但图片还是会重叠。我不知道哪里出的问题，怎么样解决图片加载慢或网速慢的情况下能够保持不出现图片重叠的情况发生呢？实在搞不定了，还望大神帮忙解决！~非常感谢！~

Answer 1

masonry 不熟
提供两个解决方案的思路

1 如果图片显示没有顺序，可以打乱的
加载完成的 图片，才加进瀑布流，未加载完成的，不加入瀑布流

2 图片必须按照顺序，不能打乱
已加载完成的图片之前的所有图片都加载完了，才显示这个图片，否则为隐藏

Answer 2

参考（用 masonry 图片重叠 关键字就搜出来了）：

1. https://www.jianshu.com/p/cff...
2. https://blog.csdn.net/weixin_...