preload

JavaScript

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

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

preload

デモ

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

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

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

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

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

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

preload

関連記事

  1. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  2. no-image
  3. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

  4. no-image

    JavaScript

    レスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」

    K-Responsive-Menuは、レスポンシブでマルチレベルに対応…

  5. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  6. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP