【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

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

関連記事

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

Twitterのオリジナルサイズの画像ファイル(.jpg-large,.jpg-orig等)を一括リネームする

Twitterの画像をオリジナルサイズで保存しようとするとjpg-la

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

→もっと見る

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