【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
  • このエントリーをはてなブックマークに追加

関連記事

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

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

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

記事を読む

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

javascriptでチェックボックスを一括で変更する方法

チェックボックスのチェックに一つ一つチェックを入れていくのは非常に手間がかかるのでjavascrip

記事を読む

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

【jQuery UI】タブをクリックしたときのイベントでselectが使えない

jQuery UIは1.10のバージョンではタブをクリックしたときのイベントの名前が変わっているよう

記事を読む

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

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

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

記事を読む

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

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

→もっと見る

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