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

関連記事

PPG_retoronasaikoro500-thumb-500xauto-910

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

jquery-icon

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

application-javascript

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

nat12_se05500-thumb-500x753-2758

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

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

記事を読む

カメラシミュレータサンプル

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

YKO85_monitamiruzangyouOL20131019500-thumb-500xauto-4534

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

source_php

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

PAK86_atamakakaerujyosei20140125500-thumb-500xauto-4730

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

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

記事を読む

nc23924

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

wordpressiconimage

WordPressの記事内でJavaScriptを動かす

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

記事を読む

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

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

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

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

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

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

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

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

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

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

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

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

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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