福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン
MENU

Kyasper Note

この記事はNOTE(メモ)として作成された単一記事です。
2014年2月9日

WordPressにjQueryプラグインLazyloadを実装して画像をふわりと読み込む

Lazyloadの目的は表示されていない画像の読込みを遅延して、読込み速度をあげるのが目的ですが、読込み時にふわりと表示させるフェード効果もつけられるので、これを実装してみます。

WordPressにもlazyload系のプラグインが沢山ありますが、フェード効果を操作できるものが見あたらなかったので、やむなくという感じです。

*プラグイン化してスマートにやればいいのですが、今回はとりあえずの対応です。(力技感がすごくありますので、ご参考程度にどうぞ)

INDEX

  1. Lazyloadを使う条件
  2. Lazyloadの実装
    1. Lazyloadの読込み
    2. Lazyloadの設定
  3. imgタグにクラス「lazy」を追加
  4. 「src」を「data-orijinal」に置換
  5. 補足

1.Lazyloadを使う要件と条件

要件
アイキャッチ画像・投稿画像全てにLazyloadのフェード効果を付ける
必要条件
  • jQueryプラグインLazyloadが読み込まれている
  • jQueryプラグインLazyloadの設定記述がある(フェード効果のオプション設定)
  • imgタグにクラス「lazy」がある
  • imgタグの「src」が「data-orijinal」になっている
Lazyload実装の基本は以下を参照
本家:http://www.appelsiini.net/projects/lazyload
当サイト:http://kyasper.com/note/memo-45/

2.Lazyloadの実装

2-a.Lazyloadの読込み

lazyload.jsをテーマフォルダにアップロードして、WordPressに読み込む

Code

2-b.Lazyloadの設定

lazyloadで、フェード効果が有効になる設定を記述

Code

3.imgタグにクラス「lazy」を追加

jQueryでimgタグにクラス「lazy」を追加します。

Code

4.「src」を「data-orijinal」に置換

アイキャッチ画像や投稿画像で出力されるimgタグの「src」を「data-orijinal」に置換します。

Code

補足

lazyloadの読込み・設定のCodeの記述場所は任意で調整してください。

「src」を「data-orijinal」に置換しているところは、アイキャッチ画像・投稿文を出力しているコードの代わりに記述します。

カテゴリー:  
タグ: