preload

JavaScript

プリロードやローディング画面を実装できるjQueryプラグイン「preload」

preloadは、その名のとおり「プリロード」やローディング中の画面を実装できるjQueryプラグインです。プリロードとは、ロールオーバーなどで生じる画像などのデータ(ファイル)をあらかじめ読み込んでおくことです。これにより、ロードする時間を省くことができるので、画面が表示されるまでユーザーを待たせてしまうことがなくなります。では、preloadの実装について紹介してみたいと思います。

preload

デモ

preloadの基本的な使い方は、配布サイトでダウンロードしたjsファイル(jQueryも)を読み込みます。

そして、プリロードしたい要素にはすべてクラス名を割り当てる必要があります。例えば、「preloadMe」などです。さらに、プリロードが完了したすべての要素にもクラス名を割り当てなくてはいけません。例えば「mainContent」などです。

また、プリロードが完了するまで表示する要素があるのなら、こちらも同じくクラス名を割り当てます。例えば「loadingElements」などです。ここまでの記述はデモページで確認できます。

制作側として、アクセスされた際には最初から完成形の画面をユーザーには見て欲しいものです。画像の読み込みに時間がかかっては、離脱率にも影響が出てしまいます。「クリックの2秒後にはイライラし始め、3分の1が諦める」ということを耳にしたことがあります。ページのスムーズな表示には、それくらい神経を使う価値があるということです。

加えて、もしプリロードをしないのであれば、ロードに時間を要すページに対しては、せめてローディング中の画面を表示することをオススメします。なぜなら、その表示ひとつでユーザーは期待しながら待つことができるからです。「何も表示されない」ことだけは避けましょう。

ユーザーからのWEBページの見え方が気になっていたり、ストレスを感じさせているかも?と心配だったりする方はぜひチェックしてみてください。

preload

Multipicker要素を選択するときに直感的な操作を実現する「Multipicker」前のページ

水平(左右)にスライドできるテーブル実装「stickyTableColumns」次のページstickyTableColumns

関連記事

  1. nuContextMenu

    JavaScript

    モダンなコンテキストメニューを実装できる「nuContextMenu」

    nuContextMenuはモダンで軽量なコンテキストメニューを実装で…

  2. jQuery.fontFlex
  3. no-image

    JavaScript

    さまざまなデバイスに対応したパララックスを実装できる「PARALLAX」

    PARALLAXは、さまざまなデバイスに対応したシンプルなパララックス…

  4. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  5. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP