13:30小技集CSSMovableTypejQueryMovableTypeのカスタマイズ情報などで大変お世話になっている小粋空間さんで、こんな記事があがっていたので反応してエントリーしてみます。流行の終わりだったかと思います。jQueryプラグインの作者のコメントがこちら。jQuery日本語ではこの辺が分かりやすかった。新しいブラウザだと期待した通りの動きをしない、というか遅延読み込みが出来ないから使う意味がないっていう感じです。HTTPリクエストを実質減らせないどころか増やすので今現在使うのはとても微妙な感じです。増やすって言っても表示後にリクエストするんで、ちょっと違いますけど。5509で、jQueryプラグインの方もこの問題に対応した最新版になっていて、その導入開設をされているのですが、できればテンプレートなどにある静的な画像ではなく、記事中に貼り付けている画像にも一斉に適用したいなと思ったので、ボクなりの実装方法を紹介します。Loadの問題点と改善版の要点さて、実装に入る前におさらいです。冒頭で紹介したリンクはチェックしといてくださいね。Loadの基本的なアイデアは、IMGタグのsrc属性を後からJavaScriptで空に書き換えて画像を読みこませず、ページスクロールに合わせて少しずつ画像を表示させるというものでした。最近のブラウザがレンダリングの時点でsrc属性に入っている画像URLを読み込んでしまうため、実質意味が無い状態になっていました。Loadではそこで、最新のjQueryプラグインでは、src属性にはダミーの画像URLを入れておき、本当の画像URLはdata-original属性に入れておいてくだいねということになりました。Loadを適用しようとする場合に、テンプレートなどに書いてある固定の画像タグは良いとして、すでに記事中に埋め込んでしまった画像タグはどうするの?っていう問題がでてきます。このブログも記事数が1000を超えていますし、手で直していくのは現実的ではありません。その辺りを解決したいなと。Load用に書き換えてしまうことにしました。Loadを適用するのは<mt:entrymore>だけにしています。変数として格納するテクニックを使っています。この辺は下記ページを参考にさせていただきました。スカイアークで、正規表現の中身ですが大雑把にいうと下記のようなルールで置換するようにしています。src=&quot;{ダミーの画像URL}&quot;に書き換えています。(JP)で出力されたタグをコピペしたりすることがほとんどなので、問題ありませんでした。});});&lt;/script&gt;とか、書いてあげればOKです。heightの指定があるため、縦横比が滅茶苦茶になってしまう可能性が高く断念しました。単色の1px四方の画像とかでも問題はありませんが、どうも味気ないので、サイズ可変でグラデーションになった状態をCSSで表現してみました。srcに指定する画像は透明1px四方のGIFを用意しました。CSSに下記のように記述しました。to(#666));}一括置換でlazyクラスを付与されたIMG要素について、グラデーションの背景を指定しました。Loadで元画像がフェードインするような効果が期待できます。※透過GIFと背景グラデーションの組み合わせとかはもしかしてブラウザ依存あるかも??こんな感じです。jQueryプラグインの開発元では一緒にnoscriptでシンプルな元画像を表示するように勧めていました。regex_replace=&quot;$regex0&quot;,&quot;$regex1&quot;&gt;ただ、この場合元画像とロード前のグラデーション画像が両方でる感じになるのであまりかっこよくはないですね。JavaScriptオフの人に完璧なレイアウトを見せなければならないかどうかは、それぞれ判断していただければ良いかと思います。Loadを導入できるので、なかなか便利な方法じゃないかと思います。説明中に書いたことも含め注意点があります。画像タグのルールが決まっていないと正規表現にはまらない画像タグのsrcがダミーになってしまうので、画像検索系のクローラーにはのらない(かも?)JavaScriptをOffにしている人にはnoscriptなど一工夫必要パフォーマンス向上を保証するものではない。表示速度については、特に画像数が多い記事に関しては体感速度が上がったように思います。体感で説得力のあるベンチマークは取れていませんので、あしからず。regex_replaceモディファイアは便利すなー。正規表現かわいいよ正規表現。Scriptを使ってメール自動返信2014年版WordPressテーマ作成の第一歩。Z120BW」プロフィールCreazy!(クリエイジー!)は、WEBエンジニアのヤガー(@yager)がWEBの最新動向やブログやWEBサイトですぐに使える技術情報などを更新しているブログです。(1)最新記事Ffmpegで複数動画を結合して一つの動画に出力*sの周期で買い替えているので、iPhone7はスルーしたヤガーです。現在メインスマホとしてはiPhone6sを利用していますが、サブ機として古いiPhone5sを利用しています。コンパクトなサイズが持ち歩きやすくサブ機にはピッタリで、MVNOの格安SIMでバックアップ回線を確保しつつ、SMARTalkで050番号を取得して事業用の待受専用電話としています。いえ、かなり使い古していることもありバッテリーが一日どころか半日も持たない状態で、なんとかしたいところ。v2.0.2公開(表示不具合対応)アジャイルメディア・ネットワーク株式会社さんの運営するレビューズからBenQの27型カラーマネージメントディスプレイ「SW2700PT」をモニター用にお借りすることができましたので使用感などをレポートしたいと思います。ワタクシ、ヤガーは趣味で写真を撮っており、プライベートでは風景がメインですが、お仕事でお店の写真を撮ったり、フードや商品の写真を撮ったりすることもあります。仕事のメインはWEBサイトの開発だったりするので、写真自体はサブ的な仕事となる事が多いのですが、プロカメラマンさんとお話する機会も多く、ゆくゆくカラーマネージメントディスプレイの導入も考えたいなと考えておりました。