◯問題
bxSliderやMasonryをそのまま導入すると、以下のような問題が起こることがあります。どちらにも共通しているのは、それらが動く前の状態が一瞬見えてしまうことです。・bxSlider
ページを読み込み後、初めの一瞬だけ画像がスライダーの枠からはみ出るくらい大きく表示されたり、スライドさせる画像が全部表示されたりしてしまう。・Masonry
画面の中央に配置したいのに、読み込んだ後の一瞬だけ左に寄って見えてしまう。◯解決方法
①
私がおすすめしたいのは、それらのJQueryプラグインを使っているコンテンツ全体を.aaa{ opacity: 0; }
このように設定することで透明にして、
②
$(window).on('load',function(){
$('.aaa').animate({'opacity':'1'},300);
});
上記のように、読み込みが完了した時点で透明にしたものを元の状態に戻すことで、表示させる方法です。