【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で画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

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

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

記事を読む

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

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

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

記事を読む

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

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

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

jQueryにおけるcreateElement

jQueryでcreateElementに変わる関数は単純で、例えばvar dom = docume

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

→もっと見る

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