【jQuery】大量の画像で重くなったページを遅延ロードで軽くする方法【Lazy Load】

公開日: : 最終更新日:2015/07/26 JavaScript/jQuery

スポンサーリンク

画像をふんだんに使っているページでは読み込みの際に非常に時間がかかるという問題点があります。数枚なら問題ないと思いますが数十枚を超えてくるとなおさらだと思います。

そういう場合はjqueryのlazyloadというプラグインを使えばスクロールしてその画像にたどりついた段階でロードを開始させることができます。

ただこのプラグインは導入するだけでOKというわけでなく、遅延読み込みさせたい画像のsrcなどの属性を変更する必要があります。(WordPressの場合専用のプラグインがあるのでそちらを利用してください。)

導入方法

ダウンロードおよび設置

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

まずjqueryが必要ですので、それを読み込ませます。jqueryがないという場合はこちらを参考にしてください。無料ブログでテンプレートを使用している場合ははじめからjqueryを使用しているものもあるのでソースを見るなどして確認してくだ
さい。

そしてその下にダウンロードしてアップロードしたjquery.lazyload.jsを読み込みます。

lazyloadダウンロード

ダウンロードの方法はページの下にあるDownloadというところの「minified」で右クリックしてリンク先を保存するなどしてダウンロードしてください。minifiedはsourceの軽量版ですのでどちらでも動きますが軽い方を選びます。

アップロードに関してはサーバーを使っているならそこを利用すればいいですし、無料ブログであれば(画像)アップローダーが付いていると思うのでそちらを使用します。例えばFC2の場合ファイル名にピリオドを含めることはできないので「lazyload.js」などと適当にリネームします。

<script type="text/javascript" src="http://mementoo.info/js/lazyload.js"></script>

当サイトではこんな風になります。(※いないとは思いますが直リンクはしないでください)

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

そして遅延読み込みさせたい画像の「src」属性を「data-original」に変更します。srcは不要な場合は何も書かなくていいですが、はじめに表示しておきたい画像を入れます。ただし、そこには読み込みに時間のかからない画像を入れてください。(例えば1×1サイズの透明画像など)。srcのものははじめにロードするのであんまり大きい画像ですとlazyloadの意味がなくなります。

<script type="text/javascript">
<!--
$(function() {
$("img.lazy").lazyload();
});
-->
</script>

そして、上のソースをbody前などに記述すればOKです。この記述ではスクロールして「lazyクラスのついたimgタグ」についたらdata-original属性の画像を読み込んで表示するといったことを行っています。

imgタグを一括でLazyLoad用に変換する

既存の記事の画像imgタグのsrc属性をdata-originalに一つずつ変更してクラス名を付加するのは非常に骨の折れる作業なので正規表現で一括で変換すると楽です。それ用のツールを作成したので良ければ使ってください。

簡単に使い方を説明しますと、赤枠の入力補助からLazyLoad用のimgタグ変換をドロップボックスから選んで置換対象の文字列を「入力」にコピペして「置換」ボタンを押すだけです。

regexlazyload

後は「出力」部分に出てきた結果文字列をコピペして使ってください。

エフェクトを付ける

javascriptソースの部分を変更するとフェードイン効果をつけたり、スクロールしてロードではなくマウスを画像位置に乗せたら読み込みを始めさせる、クリックしたら画像を読み込ませるなどと色々変更できます。

フェードイン

$("img.lazy").lazyload({
 effect : "fadeIn"
});

フェードインでは次のようにフェードの際のスピードを設定できます。

$("img.lazy").lazyload({
 effect : "fadeIn",
 effectspeed: 200
});

マウスオーバー

$("img.lazy").lazyload({
 event : "mouseover"
});

クリック

$("img.lazy").lazyload({
 event : "click"
});

組み合わせ

パラメータはカンマで区切れば組み合わせることができます。

例)

$("img.lazy").lazyload({
 event : "click",
 effect : "fadeIn"
});

デモ

スクロール

スクロール(fadeIn)

マウスオーバー+fadeIn

クリック+fadeIn

「写真素材 足成」:http://www.ashinari.com/

最後に

まれにこのlazyloadがうまく動かないことがあるかもしれませんが、その原因として恐らく他のライブラリと競合しているという可能性があります。その場合はスクリプトの書く位置を前後させてみてうまく動くか試してください。

例えばソースコードを綺麗に表示させることのできる「Syntax Highlighter」を使う場合はスクリプトの書く位置はSyntax Highlighterを先に書いてから、lazyloadはその後に来るようにソースを書く必要があるようなので注意してください。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

【jQuery】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

【javascript/jQuery】JSON形式のデータの表示確認をする

PHPであれば「var_dump」や「print_r」などでJSON形式のデータの中身が思い通りの者

記事を読む

【javascript】正規表現文字置換簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

AmazonのランキングRSSから画像リンクを作る

Amazon RSS Amazonでいい感じのRSSが無いかと探していたのですが実は本家に素晴らし

記事を読む

チェスボード画像自動生成ツール

1マスのサイズ(ピクセル) マスの数× 左上が白 枠をつけるか 枠の色白黒

記事を読む

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑