jQueryでWordPressにAjax検索を実装する
ナビゲーション改善のために検索をAjaxにしてリアルタイムにできるようにしました。WordPressなら楽々実装できます。本当は誰でも簡単に使えるようにコピペできるような内容にしようと思ったりもしたんですけど、残念ながら面倒くさくなったので、僕がこのブログに実装したコードを貼るだけにします。そうです、これが手抜きです。
ナビゲーション改善のために検索をAjaxにしてリアルタイムにできるようにしました。WordPressなら楽々実装できます。本当は誰でも簡単に使えるようにコピペできるような内容にしようと思ったりもしたんですけど、残念ながら面倒くさくなったので、僕がこのブログに実装したコードを貼るだけにします。そうです、これが手抜きです。
この前のLazyLoadの話で、LazyDisplayっていうのも作ったりしましたけど・・・
フワッと出てくる時にイラッとするから止めて欲しいな。文章中の画像表示にエフェクト要らない派なんで、スクロールしたら落ち着いてどっしりそこに構えてて欲しいな。
なるほど把握しました。こういうことですか?(某GAZINEから拝借)
というわけで例によってプラグインにしました。
スクロールしていくとフェードインで表示していくだけのプラグインです。本当にそれだけ。HTTPリクエスト減らすとか、ページロード早くなるとか一切ないです。スクロールしていったときにふわっと表示されるだけです。ちょっと注目ひきたいときに。
サンプル見てもらえば何となく伝わると思います
下記のエントリも併せてどうぞ(セットになってます)
スクロールするまで画像を読み込まない(はずの)Lazy Loadについて
ダウンロードはgithubから
対象にしたい画像に実行するだけです。
$("img").m5LazyDisplay();
ただのエフェクトだけなんで
Webパフォーマンスを考える上で重要なことのひとつにHTTPリクエストを減らすというのがありますが・・・
HTTPリクエストを減らすために、画像の遅延読み込みをすると噂のLazy Loadっていうプラグインがあって、結構色んなサイトで使われているのを見るので、一言言っとくか的な感じで書こうとしたらいつからかプラグインページに以下の注意書きが追加されてた。
Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself. Patches are always welcome. If you find a solution just fork and send a pull request. Thanks!
新しいブラウザだと期待した通りの動きをしない、というか遅延読み込みが出来ないから使う意味がないっていう感じです。むしろHTTPリクエストを実質減らせないどころか増やすので今現在使うのはとても微妙な感じです。増やすって言っても表示後にリクエストするんで、ちょっと違いますけど。
というか昔はできてたんかな・・・その辺まで調べきれてないのでアレです。。
ブログとかのプラグインでよく分からず使ってる人もいるみたいですし。結論は一番上のやつやってればいいんですけど、というか、プラグインソースは全部こうなってないとだめなんですけど、古いソースコードはそうなっていないものもあったりして(thickboxとか)、思いつく方法全部書き出します。