ブログの画像を後から読み込んでページを軽くするjavascript

プログラミング関係

このブログは結構写真を載せている。
元画像から縮小して小さくしているものの、そのサイズは大きく表示が遅くなっている。
そこで今回紹介する画像の遅延読み込みをするためのjavascriptプラグインの出番である。

ダウンロード

Lazy Load Plugin for jQuery
英語のサイトだけど下の方にスクロールするとdownloadがあるから、
sourceの方でもminifiedの方でも好きな方を右クリックでダウンロードしよう。

なぜこのプラグインなのか?

このプラグインを選んだ理由を書いておこう。
画像関係のプラグインでlightboxって言うのがあって、これは画像をクリックすると『うにょ~ん』と画像がポップアップしてくるやつだ。
そのlightboxで僕が使っている『WordPress用lightboxプラグイン作ってみた』と共存できるのが一番の理由だ。
今回紹介した以外の遅延読み込みに関しては『画像の遅延読み込み』を参考にして貰えば良いと思う。

使い方

このjavascriptはjQueryって言う物も必要だ。
ブログで既に使っている場合は良いんだけど、まだの時は以下のコードをヘッダー内に追加しておこう。

<script src="http://www.google.com/jsapi">
<script type="text/javascript">
    google.load("jquery", "1");
</script>

Lazy Load Plugin for jQuery』をダウンロードしたら、アップロードしそれを読み込んで実行するコードも追加する。

<script type="text/javascript" src="http://www.example.com/js/jquery.lazyload.mini.js">
<script type="text/javascript">
$(document).ready(function() {
    $("img").lazyload();
});
</script>

基本的にはこれで終了。example.comの部分は自分の環境に合わせて変更してね。

おまけの設定

この画像遅延読み込みには設定が少し出来る。
詳しくはプラグインの名前で検索してもらうとして、僕が設定している物を紹介しておく。

<script type="text/javascript">
$(document).ready(function() {
    $("#left-col img").lazyload({
        placeholder:"https://www.hosimitu.com/img/grey.gif",
        effect:"fadeIn"
    });
});
</script>

まず、『$(“#left-col img”)』だけど、このブログの記事部分だけにこのプラグインを有効するための記述。
サイドバーとかフッターとかはこのプラグインによる遅延読み込みがされないようにした。
htmlでいうid=”left-col”の部分だけに適用されるのだ。

次に『placeholder:”https://www.hosimitu.com/img/grey.gif”,』だけど、これは画像の遅延読み込みをする前に置き換える画像を指定している。
基本的に設定する必要がない物なんだけど、設定しておくと画像が読み込まれる間もブログの記事がさみしくなくなる。
ペイントなんかを使って1×1の大きさの画像を自分で用意すればOK。

最後の『effect:”fadeIn”』は画像の読み込みが終了した時の表示方法の指定だ。
フェードインする設定にしたんだけど、その理由はその方がカッコイイと思ったからです。

コメント

タイトルとURLをコピーしました