Facebook Twitter Google Maps RSS
Home 未分類 【第9回】jQueryで画像遅延読み込み ~LazyLoad~
formats

【第9回】jQueryで画像遅延読み込み ~LazyLoad~

Published on 2016年4月12日, by in 未分類.

みなさんこんにちは!最若手のリョータです!
桜の季節で春の陽気が気持ちいいですね!
過ごしやすい時期になってきたので色々なことにチャレンジしていきたいと思います!

さて、本題ですが、
今回業務で実際に必要となった、LazyLoad for Plugins jquery について解説してみたいと思います。
こちらのプラグインは、webページを表示する際にスクリーン上に見える画像のみを読み込み、
スクロールされると更に画像を読み込むといったものです。
主に多くの画像を閲覧する際のレスポンス改善に繋がると思います。
それでは説明をしていきます。

    使い方

まずは下記サイトからプラグインをダウンロードしてください。

プラグインはこちら

ダウンロードが出来ましたら、任意の階層に配置し、遅延読み込みをさせたいページで読み込んでください。

<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

ちなみにjqueryも必要なので、合わせて読み込んでください。

次はHTML側ですが、遅延読み込みをさせたいimgタグはsrcを指定するのではなく、
data-original属性に画像のパスを指定してください。
そしてクラス名には判別がつくようにlazyを追加してください。

<img data-original="画像パス" class="lazy">

これでHTML側の対応は完了となります。

続いてjquery側ですが、

$(function() {
    $('img.lazy').lazyload() ;
});

のように初期化の処理を入れるだけです!
これで動作としては完了となります。
ちなみにこのプラグインはオプションも充実しており、
上記の初期化の際に、lazyload()にオブジェクト形式で指定ができます。

・threshold
画面が何ピクセル近づけば表示するかを指定。
下記の場合は100pxとなります。

$(function() {
    $('img.lazy').lazyload({
        threshold : 100,
    }) ;
});

・event
読み込みのイベントを設定。
デフォルトではスクロールされるとイベントが発生しますが、
その他にマウスオーバー、クリックに変更することが出来ます。

$(function() {
    $('img.lazy').lazyload({
        event : mouseover,
    }) ;
});

・effect
fadeInを指定できます。

$(function() {
    $('img.lazy').lazyload({
        effect : fadeIn,
    }) ;
});

・effect_speed
上記のエフェクトにかける時間を指定します。
fast,slowまたはミリ秒単位で指定ができます。

$(function() {
    $('img.lazy').lazyload({
        effect_speed : fast,
    }) ;
});

・failure_limit
一度に表示判定を行う画像枚数の上限を指定できます。
デフォルトでは1度に1枚となっています。

$(function() {
    $('img.lazy').lazyload({
        failure_limit : 2,
    }) ;
});

これらのオプションで応用を効かせることもできそうですね。
簡単ではありますが、以上で説明は終了です!

まとめ


今回のものは特に難しいものでもないのですが、こうしたライブラリはとても汎用性を考えながら組まれているため、
とても参考になりました。私自身業務でjqueryで一機能作成などを担当する機会がありますので、
そういったものもライブラリ化するなど汎用性に富んだものを作っていきたいと感じました。

このシリーズも9回目となり、ひとまず残すところ3回となってきました。
こうして学習内容をアウトプットすることで自身の理解を整理することができ、
非常に有意義な取り組みだと感じています。
この調子で最後までやり遂げたいと思います!!

この記事が少しでもみなさまのお役に立てれば幸いです。

ではまた次回!!
 
弊社開発実績はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*