WordPressに【jQuery Image Lazy Load WP 】をインストールしてスクロールに併せて画像を表示

この記事の所要時間: 322

さて本日のエントリーで始めて画像を挿入してみましたが、もうちょい格好良く表示させることってできないかな?と思い、プラグインを漁っておりました。そうすると、あるじゃないですか。スクロールに併せて「フワッ」と画像を表示させるプラグインが。え、なんだか良くわからないですって?いやいや「フワッ」ですよ「フワッ」。白い服で黒髪長髪の美少女が突然目の前に現れるようなアレですよ。いや何でも無いですよ。

jQuery Image Lazy Load WPを使う

はい、ともかくこのプラグインを導入しましょう。これは画面のスクロールに併せて画像を読み込んで表示させて行くというプラグインです。通常WEBサイトを開きますと、そのページにある要素が全て読み込まれるようになっています。もちろん通常の動作なので何も間違ってはいないんですけれども、サイト上に表示される画像量が多い場合、それに併せてWEBサイトを読み込むのに時間がかかります。「まだ全体表示できないのかよ…」とネットサーフィンしていて思った事がある人は結構いるんじゃないでしょうか。それ、大量の画像のせいだったりします。

そこでjQuery Image Lazy Load WP。ページの画像を一気に読み込むのではなく、スクロールに併せて、画面に表示される時に画像を読み込む為のプラグインになります。そして、この画像を読み込み、表示させる時の動作が「フェードイン」の処理になっておりまして、画像が「フワッ」と表示される原因になっております。

ここまで書きますと、お気づきかと思いますが、「画像の表示のさせ方を変更」することが目的のプラグインではなく、WEBサイトの表示を軽くする為のプラグインなんです。最初に大量の画像を読み込む必要が無くなりますので、必然的に軽くなるんですね。

 

jQuery Image Lazy Load WPの導入方法と注意点

WordPressのダッシュボードからプラグインを検索してインストール、有効化すれば使えます。非常にお手軽。プラグインをダウンロードしてFTPなどで適用することもできます。

プラグインのダウンロードはこちら:jQuery Image Lazy Load WP

とっても簡単…なのですが、一点注意が必要です。それはページの上部から順に画像を読み込んで行くという事。WEBサイトの構成によって違うのですが、時折サイドバーの記述がソースコード上で下部に表記されている場合があります。この場合でサイドバーに画像が表示される場合、WEBサイトの最下部までスクロールして表示させないと、サイドバーの画像が表示されないなどの問題が発生する場合があるようです。

現在、当ブログのサイドバーに画像は無いですが、念のため対処しておく事にしました。この問題を回避するための方法はこちらのブログ様のエントリーを参考にさせて頂いております。

jQuery Image Lazy Load WP – コンテンツ部分以外の画像にフェード効果をつけない | あんとんさんち

具体的に紹介しますと、プラグインの「wp-content/plugins/jquery-image-lazy-loading」内にある「jq_img_lazy_load.php」の27行目を以下の様に編集することでサイドバーをプラグインの効果対象外にすることができるそうです。

jQuery("img").not(".cycle img").lazyload({

上記のソース部分を、

jQuery("#content img").not(".cycle img").lazyload({

このように変更するのです。サイドバーに掲載されている画像は処理の対象外となりました。まぁウチのブログはまだ全然関係ない話なんですけどもね。ということで皆さんjQuery Image Lazy Load WP、ぜひご利用ください。

それでは、これにて。


コメントを残す