preload

JavaScript

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

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

preload

デモ

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

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

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

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

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

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

preload

関連記事

  1. VerticalShift

    JavaScript

    要素を縦長に並べてマウスオーバーで全部表示させるjQueryプラグイン「VerticalShift」…

    とても面白い見せ方だったのでご紹介します。要素を縦長に並べてマウスオー…

  2. JavaScript

    アニメーション付きの水平・垂直プログレスメーターを実装できる「jQMeter」

    jQMeterはアニメーションが付いた水平・垂直のプログレスメーターを…

  3. lightgallery.js
  4. mgGlitch

    JavaScript

    グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

    mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショ…

  5. Lena.js

    JavaScript

    多彩な画像処理ができるJSライブラリ「Lena.js」

    Lena.jsは多彩な画像処理を行うことができるJSライブラリです。セ…

  6. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP