Category Archives: JavaScript

Datepickerを日本語化/祝日対応/スマホ対応する | JavaScript | Webサイト開発

jQuery UIのDatepickerは、日付をカレンダー表示できるウィジェットです。
フォームで日付を入力するときに大活躍するのですが、いざ使ってみると「日本語化」「祝日表示」「スマホ対応」をどうすればよいか、悩むことになります。

そこで今回は、jQuery UI の DatePicker ウィジェットの実践的な使い方を解説します。

※本記事のサンプルコードでは、CDNのURLを指定していますが、実案件ではJSやCSSをダウンロードして使うようにしてください。
続きを読む

Lazy Loadで画像を遅延ロードする | JavaScript | Webサイト開発

大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。
imgタグを使って、普通に実装すると次のような現象が起きてしまいます。

  • 画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る
  • ネットワークやサーバーの負荷が瞬間的にひっ迫する
  • PageSpeed Insightsで低スコアになる

これだと、サイト利用者にとっても、サーバー側にとっても、いいことはないですね。
対処方法として、スプライト画像を使うとか、CDNを使うとか、Expiresヘッダを設定するとか様々な方法がありますが、Webフロント側でお手軽にできる対策が画像を遅延ロードできるライブラリ「Lazy Load」の導入です。

今回は、Lazy Load で画像を遅延ロードする方法を解説します。
続きを読む