jQuery：Masonryで画像が重なるときの対処方
2月 3rd, 2015
最近よく使うjQueryライブラリの[Masonry]、ウィンドウサイズによって画像が上手い具合に並んでくれるのでリッチコンテンツっぽいです。
実際の設置方法はこの辺で
で、設置してみたはいいけどページ読み込んだら画像が重なって表示されウィンドウサイズを変更すると正しい表示に戻る。という不具合がでました。
使ってる画像が重いのかなぁなんて思っていたんですが、単純に読み込み順の問題だったようです。
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 200 //一列の幅サイズを指定
});
});
普通↑のようなスクリプトを書くと思うんですが、これだと問題の現象が発生します。
jQuery.event.add(window,"load",function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 200 //一列の幅サイズを指定
});
});
というように全読み込みが終わったら実行するというように変更することで問題を回避できます。
カテゴリー: web
