情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

画像を遅延読込するWordPressプラグインを導入しようとしてみた

WordPress (76) WordPressプラグイン (25)

WordPressの画像を遅延読込するプラグインを導入したので、そのときのメモを書いておきます。

プラグイン:Lazy Load

WordPressプラグインに、ずばりそのままの「Lazy Load」というプラグインがあったので、まずこれを導入してみました。

しかし、Android(L-01D)の標準ブラウザで、画像が二重に表示されてしまう問題が発生しました。読み込み後のソースコードを表示する機能がブラウザに無いため、詳細は確認できませんでしたが、見た目上、imgタグが2つに化けてしまっているようです。

というわけで利用を却下しました。

プラグイン:jQuery Image Lazy Load WP(v0.13)

そこで、次に人気のありそうだった「jQuery Image Lazy Load WP(jQuery lazy load plugin)」を導入しました。

これはこれで問題があって、サイドバーの画像が、読み込めない事態が発生しました。

というのも、HTML上でサイドバーがメインコンテンツの後ろにあるため、メインコンテンツをスクロールしないと、サイドバーがスクロールされたことにならないようなのです。

そこで、このサイドバーの画像を読み込めない問題の解決法が掲載されているページを参考に、対策をしてみました。

この方法では、プラグインを提供するimgタグをメインコンテンツ(本文)のimgタグに限定することで、そもそもサイドバーを遅延読込の対象外にしてしまいます

編集対処は、プラグインの「jquery-image-lazy-loading/jq_img_lazy_load.php」というファイルのこの行です。

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

そのメインコンテンツの指定方法として、メインコンテンツを表す要素のclass/idを指定します。現在、このブログでは、本文が「>div class=".contentleft"<」というタグで囲んでいるので、次のように変更し、そのタグを指定してしまいます。

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

これで、サイドバーの画像が表示されない問題がとりあえず解決できました。しかし、あまり良い方法とも思えないので、なんだかなぁーという感じです

効果?

Chromeの「Developer Tools」の「Network」タブで効果を試してみたところ、確かにスクロール後に画像を取得していることが分かります。

実際の効果(負荷の軽減や表示の高速化)の程度は分かりませんが、正しく動いているような気にはなれました。

あれ?

しかし、あることに気が付きました。

たしかに、スクロール後に画像がダウンロードされているのですが、スクロール前にもダウンロードされているのです。つまり、結局2回ダウンロードしてしまっていました

一定時間画像のダウンロードが「Pending」と表示されるのですが、20秒近く読込を一時停止した後、結局読み込んでしまっています。

つまり、2回目の遅延ダウンロードは無駄ということです。結局遅延表示のエフェクトを実現するためにもう一度ダウンロードしている無駄プラグイン状態です。

ちなみにChromeのバージョンは最新版の「バージョン 23.0.1271.97 m」でした。

その結果

結局最終的に遅延読込プラグインは停止してしまいました。

そこでこのことについて調べてみると、遅延読込が役に立っていないという記事(これはLazy Loadについて)もあり、代わりのプラグイン探しはとりあえずまた今度、ということにしました。「この問題に触れていて、それを解決したこのプラグインがオススメ」という紹介記事が登場してからでいいかな、と思ってしまいました。

コメント(0)

新しいコメントを投稿