preload

JavaScript

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

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

preload

デモ

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

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

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

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

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

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

preload

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

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

関連記事

  1. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  2. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

  3. jQuery Slideshow

    JavaScript

    シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」

    jQuery Slideshowはシンプルで軽量、そしてレスポンシブに…

  4. number-divider.js

    JavaScript

    数字を分割できるjQueryプラグイン「number-divider.js」

    number-divider.jsは数字を分割させることができるjQu…

  5. Bootstrap Photo Gallery jQuery plugin
  6. no-image

    JavaScript

    サイドバーをフローティングできる「FloatSidebar.js」

    FloatSidebar.jsはサイドバーをフローティングできるVan…

最近の記事

  1. ペットボトルホルスター
  2. SRS-XB43
  3. Nu:kin

アーカイブ

PAGE TOP