preload

JavaScript

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

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

preload

デモ

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

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

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

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

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

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

preload

関連記事

  1. WEB TICKER

    JavaScript

    テキストや画像を無限にスクロールさせれるティッカー実装「WEB TICKER」

    WEB TICKERは、テキストや画像、リストなどさまざまなコンテンツ…

  2. JavaScript

    カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia

    insigniaはカスタマイズ性に優れたタグ入力を実装することができる…

  3. Hamburger Icon Menu
  4. JavaScript

    レンガ風に要素を綺麗に並べてグリッドレイアウトが作れる「The Wookmark jQuery pl…

    Pinterestのように高さの異なる要素をレンガ風に綺麗に並べて、簡…

  5. no-image
  6. JavaScript

    サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」…

    Material Menuはサイドからスライド開閉するレスポンシブ対応…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP