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

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

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

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

そこで、次に人気のありそうだった「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」タブで効果を試してみたところ、確かにスクロール後に画像を取得していることが分かります。

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

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

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

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

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

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

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

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