スクロールに合わせた画像読み込みプラグイン[BJ LazyLoad]

Date:2013/10/13 | Category:便利でおすすめなWPプラグイン紹介
プラグイン

海外に多いスクロールしてから画像が表示されるサイト。

見える部分以外の画像読み込みを、javascriptを使って遅延させることで、スクロールに合せた動きや、サーバー負荷の軽減を実現しています。

今日は、画像遅延ロードを実装するワードプレスプラグイン『BJ LazyLoad』を紹介します。

BJ LazyLoadをインストールする。

ワードプレス管理画面:左サイドバーのプラグイン→新規追加から、BJ LazyLoadで検索すると、簡単にインストールできます。

または、こちらのワードプレス公式サイトからファイル一式をダウンロードし、 あなたのサーバー上の「/wp-content/plugin/」 にアップロードしても良いです。

BJ LazyLoadの項目別、設定方法。

プラグイン設定画面
Apply to content
コンテンツに遅延ロード対応させるかを設定。Yesにしないとこのプラグインが働きません。
Apply to post thumbnails
サムネイル画像を遅延読み込みに対応させるかを設定します。サムネイル設定している方はYesに。
Apply to gravatars
アバターシステム「Gravater」を使ったコメント欄の画像を遅延ロードさせるかどうか。
Lazy load images
jpg・gif・png画像ファイルに遅延ロードを適用させるかの設定。Yesにすべき項目。
Lazy load iframes
ソーシャルメディア等、iframeで表示させているコンテンツに遅延ロードを対応させるかどうか。
Theme loader function
LazyLoadを起動するコードをどこに記述させるかの設定。通常デフォルトのwp_footerで良いが、上手く機能しない場合はwp_headに変更する。
Placeholder Image URL
読み込みが開始されるまで表示されるローダー画像(loading・・・など)を指定できますが、特に指定しなくても大丈夫です。
表示させる場合、ファイルをアップの上でパスを記述しましょう。例:/wp-content/uploads/○○○.gif
Skip images with classes
遅延読み込みさせたくない画像のクラス名を指定できます。
Threshold
画像まで何px近づいたら読み込みを開始するかの閾値(いきち)を数字で指定。400ぐらいにしておくと、スクロールが到達した時点でしっかり画像が表示されるかと。
Infinite scroll
facebookのような無限スクロールを実装したサイトにおいて、遅延ロードを実装するかを設定。
Load hiDPI (retina) images
高解像度RetinaディスプレイMac向けの画像を遅延ロードにするか設定。通常はNoで。
Load responsive images
レスポンシブに設定された画像を遅延読み込みにするかを設定。通常はNoで良いでしょう。

注意点や補足の情報

ローダー画像の設定(Placeholder Image URL)について、以下ような無料サイトで、gifアニメローダー画像を作成しても面白いと思います。
Ajaxの読み込みGIFジェネレータサイト

また、「Load hiDPI (retina) imagesの項目」および「Load responsive imagesの項目」をYesに設定すると、透過gifの背景が黒くなることがありますのでご注意ください。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply