jQuery lazy load plugin 導入

さて怒涛のwordpress週間です。

今回は実際にスクロールするまで画像を表示せず、スクロールしていくとフワっと画像を読み込んでいくjQuery lazy load pluginを導入してみました。

これまたいろいろと問題が発生しまして…。「jQuery prototype 競合」でググってもらえるといっぱい出てくるのですがドンピシャな解決策がなかったのでいろいろと試行錯誤してしまいました。

まずは、このjQuery lazy load pluginを導入して発生した問題は、

① サイドバーの画像が画面を一番下まで読み込まないと表示されない(グレーのまま)
② iPhoneで見たときに画像が表示されない
③ lightbox-2プラグインが動かなくなった。Topsy Retweet Buttonプラグインも動かなくなった

と踏んだり蹴ったりでした。いっそのことこのプラグインの導入はやめようかと思いましたがなんとか解決できたのでメモ代わりに。

①と②は同様の解決方法でいけます。

「プラグインの編集」からjQuery lazy load pluginの一部プラグインを修正します。
以下の2箇所を修正するだけです。

jQuery(document).ready(function($){
  if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  jQuery(".textBody img").lazyload({
    effect:"fadeIn",
    placeholder: "$placeholdergif"
  });
});

まず2行目ですが、iPadだけでなく「|| navigator.platform=="iphone"」を追加します。
本当はis_mobile()関数などを作って、iPhoneだけでなくAndoroid携帯も対処させたかったのですが、うまく動作しなかったので仕方なくiPhoneとiPodのみを指定することにしました。(②の対処)

次に①への対応ですが、これはこの適用範囲を絞る方法となります。
デフォルトでは「 jQuery("img").lazyload({」とimgタグ全てに適用されてしまうのですが、classを追加できるようなので、自分のテーマにあったclassを追加します。このページのソースを見ればわかると思いますがVicunaではbodyタグをtextBody classで括っているようでしたのでここを適用範囲としています。

最後に③の対処方法ですが、すごくはまりました。ググってみたけど、対処方法はjQueryプラグインを先頭で読み込ませてとか、おまじないを入れてとか…でしたが、結局は「テーマの編集」→「ヘッダー(header.php)」の最後におまじないを入れることで競合が回避できたようです。(解決に至った理由はよくわかっていません)

<?php wp_head()?>
<script>jQuery.noConflict();var j$ = jQuery;</script>
	<title><?php vicuna_page_head_title()?></title>
</head>

競合回避のキーワードはjQuery.noConflict()は間違いないのですがよくわからないですね…。