万屋物産HPのトップページ読み込み時に、下の記事一覧が一瞬だけチラッとなりその後ヘッダエリアが表示される問題がありました。記事ゾーンの描画を遅らせることで力技気味ですが解決したので作業メモ。

1, 記事ゾーンのcssにdasplay:noneをあてる

「.grid」で記事全体が囲われていたので、

.grid{
    dispaly:none;
}

として、記事全体を非表示にする。

2, jQueryで.gridをフェードインする

フッタに以下のコードを追加

jQuery(document).ready(function( $ ){
$(document).ready(function(){
    $('.grid').hide().fadeIn('slow');
});
  });

jQueryはwordpressの中にそのまま書いても動かないので、以下に内包するように動かしたい内容を書く。

jQuery(document).ready(function( $ ){
//やりたい内容
});
  });

これで先にヘッダが読み込まれ、ちょっとしてから記事エリアが表示されるためチラつき問題をクリア出来ました。

万屋物産ではWeb関連のスタッフを募集しています。UI/UXデザイン、pythonなどに知見ある方はお気軽にお問い合わせ下さい。