撸linux


jquery等待所有图片加载完毕后再使用masonry瀑布流布局

瀑布流的布局非常适合图片展示类的网页。瀑布流的布局也有很多种,我用的masonry.js是其中的一种,曾经用到了lulinux.com首页中,因为发现它并不适合非图片类的网页,所以现在取消了,但是我的另外一个网站manjaro.cn截图分类页仍有保留。

一直以来,这个页面有一个问题,就是瀑布流自适应的布局总是要在手动F5刷新之后才能生效,否则图片就会堆叠到一起,影响观感体验,不知道因此赶走了多少人。我的分析是:masonry已经起作用的时候,图片并没有加载完毕。做出这种分析之前,也测试过使用display:block来解决,已经失败。

按照这种分析思路,我百度了一下“jquery等所有图片加载完”,找到了辰阳提供的答案,经测试,在chromium里有效果,在firefox里还是无效。

后来找到了这个答案《jquery 判断图片加载完毕例子》,终于帮我解决了这个大麻烦,代码如下:

var imgdefereds = [];
$j('img').each(function() {
var dfd = $j.Deferred();
$j(this).bind('load', function() {
dfd.resolve();
}).bind('error', function() {
//图片加载错误,加入错误处理
// dfd.resolve();
})
if (this.complete) setTimeout(function() {
dfd.resolve();
}, 1000);
imgdefereds.push(dfd);
})
$j.when.apply(null, imgdefereds).done(function() {
$j('#boxes').masonry();
});

//请酌情将$j改为$

目前,这段代码非常适用我这个只含有少量图片的网页。

如果图片太多的话,可能要考虑更复杂的代码,毕竟不可能加载完所有大量图片(比如上百张)然后再来个瀑布流平铺特效动画。

效果图:

相关博文



发表评论

电子邮件地址不会被公开。