ウェブマスターがウェブのことを書いたらMENUお問い合わせフォームこのブログについてウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。ページ高速化サイトのページ読み込み高速化のひとつとして、画像の読み込みを後読みにするjavascriptを検討してみた。jQuery』というのがあるみたい。画面のスクロールにあわせて画像を読み込むらしくページを開いた時の読み込むリクエストを減らせるらしい。いろいろなブログでみたところ、昔のバージョンといまのものでは違うらしい。昔のバージョンでは思ったような挙動にはならないらしい。Loadについて※リンク切れ新しいブラウザだとこのスクリプトを実装してもページを開いた時にすべての画像を読み込んでしまうので意味が無いらしい。プラス、スクロールしたあとでもリクエストが発生するようなことも。新しいバージョンだとそこのところに対応してバージョンアップしているとのこと。画面スクロールに合わせてコンテンツを読み込む「jquery.lazyload.js」について。試しに以前のものとバージョンアップ後のものを設置してみた。◯バージョンアップ以前のもの(キャッシュのある状態)↑スクロールしていない状態ですべての画像を読み込んでいる。◯バージョンアップ後のもの(キャッシュのある状態)↑画面に表示されている画像のみ読み込んでいる。たしかに以前のものはページを開いた時にリクエストされているようです。あたらしくなった方は大丈夫っぽい。いろいろなブログでも書かれていますがページの軽量化という意味では微妙なのかもですが、ポンパレやギガジン、ジョブセンスなんかでも現在採用していますね。オプションのフェードインを使うとふわっとする感じで画像が表示されるのはアイキャッチとして目をひきますよね。Loadプラグインを公式サイトからダウンロード。以下をheadタグ内に記述。{$("img.lazy").lazyload({});});</script>適用させたい画像のimgタグのsrc属性にダミー画像のパスを、data-original属性を追記してここに表示させる画像のパスを記述。スポンサードリンクTweet関連する記事wordpressでjqueryが動かない場合の覚書。コメントをキャンセルメールアドレスが公開されることはありません。リファレンス日本語訳(一部)NEXT「ブラウザのキャッシュを活用する」にはApacheモジュールmod_expiresを設定スポンサードリンク管理人が使っている安定の「Xサーバー」Xサーバー、さくら、ロリポップの比較記事はこちらこのブログを書いている人ネット系の企業で自社サービスのWEBマスターをしています。サイトの開発、運営をメインに書いています。