【コピペで簡単】 スマホ用Webサイト、ブログのクリック遅延の解消法

2019年03月15日
0
0
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など

こんにちは。FC2ブログを運営するブロガーMです。最近は、スマホを使ってWebサイトブログを閲覧するのが主流になりました。


今回は、スマホでWebを見る時にイライラする原因のひとつ「Clickイベントの遅延」について、その対策をご紹介します。とっても簡単だったので、さっそくボクのFC2ブログにも実装してみましたよ(^^)


【コピペで簡単】 スマホ用Webサイト、ブログのクリック遅延の解消法


ちなみに、ボクだけに限らず、ブロガーさん達は皆さんがスマホ主流の流れに沿って自分のサイトをレスポンシブデザインに変更してみたり、ページの読み込み速度を改善してみたり。「いかにしてスマホで快適にブログを見てもらうか」を主眼に、さまざまな工夫をなさっていることと思います。


今回ご紹介する方法は、たった数行のコピペだけで出来る簡単なClickイベントの遅延対策です。ぜひともご参考になさって頂ければ幸いです(^^)


スポンサードリンク

実装手順


では、さっそく見ていきましょう。今回は、スマホの場合に起きるClickイベントの遅延対策としてFastClickというJSを使います。


①FastClick.jsを読み込む


まず、下のコード
<head>
の中に記述します(タグの<>は半角に直して下さい)。

<script type='application/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js'></script>

②FastClick.jsの初期化


続いて、もうひとつ。次のコードを、先ほどのコードの後に差し込みます(タグの<>は半角に直して下さい)。

<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
</script>

以上です。たったこれだけ?(゚o゚;;そうです。これだけです。簡単でしたね!!


たったこれだけで、スマホから「aタグ」などをクリックした時に、一瞬で読み込みが始まります。



FastClick.jsは、すべてのブラウザに対応する遅延解消法としておすすめ!


スマホのClickイベントの遅延対策としては、他にもいろいろ考えられます。しかし、すべてのブラウザに対応させる遅延対策としては、現状ではFastClick.jsが一番最適な方法のようです。


使用上の注意点


FastClick.jsを使うことによる注意点がひとつ。これを実装すると、ダブルタップによるズームインズームアウトが効かなくなってしまいます。


でもまあ、スマホでブログを閲覧してて、表示を拡大させるのにわざわざダブルタップをしなくても…ということも言えますから(^_^;)


内容(「BOOK」データベースより)
Web担当者、マーケターの必携書!第一線のアナリストが教える「データの見方」と「改善ポイント」。この1冊で、長く使える基礎力と実践スキルを身につける!





関連記事

この記事が気に入ったら
シェア!

 シェア
スポンサードリンク
M
Posted by M
ブロガー/ファッション研究家/会社経営/ヘッドスパとスイーツをこよなく愛する45歳/おうちごはん男子部 所属/料理を悪戦苦闘修行中/2011年38歳の若さでほぼ末期の胃がん宣告/奇跡的に生還!/人生なんて気持ち次第!!きっとなんくるないさ~

Comment 0

There are no comments yet.

コメントする