ククログ

サイト「ququs | ククス」の次回更新分の動作確認をしていたところ、スマートフォンで予期しない問題が発生し解決に手間取ったので、備忘のためエントリーを書いておこうと思います。

問題は、各ページに設置したソーシャルボタンの表示に時間がかかることに引きずられ、レスポンシブデザインがうまく機能しないというもので、簡単なJavaScriptでボタンを遅延表示することで回避できた模様です。


調べると同様の問題はよくあることのようで、各SNSから提供されるスクリプトに手を入れて、非同期呼び出しを行う回避法などが示されていました。

しかし、手元の環境ではそれらでは状況が改善されず（具体的にはFacebookの「いいね！」ボタン）、また提供されたスクリプトに手を入れることへの抵抗感もあったため、アイディアだけ拝借した形です。


参考までに、用意したJavaScriptを提示します（jQuery を使用しています）。

$(function() {
   $(".lazy").hide();
   setTimeout(function() { $(".lazy").show(); }, 3000);
});

CSSクラス「lazy」を与えた要素を読み込み時に非表示とし、3秒後に表示しています。


現在公開中のサイト にもこの問題が存在するため、お見苦しい箇所があるかもしれません。
近々予定している更新での対応を予定しています。

次回は少し大きめの更新になる予定ですので、お楽しみに。