//使用了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显示都是加载完成,但图片还是会重叠。我不知道哪里出的问题,怎么样解决图片加载慢或网速慢的情况下能够保持不出现图片重叠的情况发生呢?实在搞不定了,还望大神帮忙解决!~非常感谢!~
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…