背景画像遅延読み込みスクリプトの無料ダウンロード

CSSで設定する背景画像(background-image)を遅延読み込みさせるスクリプトを無料でダウンロードできます。
スクリプト名はそのまま「背景画像遅延読み込みスクリプト」としておきます。

WordPressのような動的なページだけでなく、HTMLとCSSだけでできているような静的なページにも簡単に組み込めるようになっています。

現在の最新バージョンは2023年4月25日公開の1.0です。
参考ページ：プログラムをアップデートするの際の思想について

各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

機能の概要

一般的に、ブラウザがWebのページを開く際の表示速度において、最も大きなボトルネックになるのは画像です。
画像はテキスト文字に比べて数百倍以上の容量があるからです。

HTML上で画像を貼り付ける場合は以下のようなimg要素を使いますが、

<img src="画像のURL" width="横幅の数値" height="縦幅の数値" alt="テキストによる説明" />

img要素の場合は、以下のように loading=”lazy” 属性を付加すればその画像は遅延読み込みされるため、とても簡単に実装ができます。

<img src="画像のURL" width="横幅の数値" height="縦幅の数値" alt="テキストによる説明" loading="lazy" />

しかし、CSSで設定する背景画像(background-image)にはそのような簡単な方法が用意されていないので、遅延読み込みさせるには難易度が高くなります。
それを簡単に実装できるのがこの「背景画像遅延読み込みスクリプト」になります。

その他の特長

この「背景画像遅延読み込みスクリプト」のその他の特長は以下のようなものがあります。

• 簡単に既存のページに組み込める。
• HTMLページにも組み込み可能。
• jQueryは不要。
• 遅延読み込みさせる画像の数に制限なし。

背景画像遅延読み込みスクリプトのサンプルとダウンロード

背景画像遅延読み込みスクリプトのサンプル
このサンプルページでは8枚の画像を縦に並べてあり、それらすべてが遅延読み込み対象にしてあります。
(本来はファーストビューにある画像は遅延読み込みさせないほうが良いです)

背景画像遅延読み込みスクリプトのダウンロード
無料でダウンロードできます。

使い方の説明(動作確認方法)

まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。

1、背景画像遅延読み込みスクリプトをダウンロードし、展開する。

2、フォルダごとサーバにアップロードする。

3、ブラウザで bg-lazyload-v1.0/index.html にアクセスし、動作を確認する。

既存サイトへの組み込み方法

以下の作業は同梱の bg-lazyload-v1.0/index.html のソースを見ながら、またはコピーしていくと間違いがないでしょう。

4、まず、遅延読み込みさせたい背景画像を設定している要素に class=”bg-lazyload” を追加する。
以下のサンプルのコードでは sample-1 というクラス名もありますが、これはあってもなくてもどちらでもOKです。
また、HTML要素はdivでもpでもなんでもOKです。

<div class="sample-1 bg-lazyload"></div>

5、CSSで以下のように背景画像を設定する。
注意点：ここで指定するCSSセレクタは「.bg-lazyload」ではなく、「.bg-lazyloaded」です。
これにより、上記の class=”bg-lazyload” の背景画像が遅延読み込みされることになります。

.sample-1.bg-lazyloaded {
  background: url( '../image/background-1.jpg' ) no-repeat 0 0;
}

ま、上記のようなセレクタを使わなくても、もし親要素に何らかのID名が付いた要素があるのなら、以下のように指定してもOKです。(以下は親要素に div id=”test” がある場合の例)

#test .bg-lazyloaded {
  background: url( '../image/background-1.jpg' ) no-repeat 0 0;
}

6、bg-lazyload.jsを読み込ませる。
そのページから bg-lazyload.js を読み込ませてください。
この bg-lazyload.js のファイルの設置場所は自由です。
もしすでにサーバー上に専用のJSフォルダが存在するのであれば、その中に移動させても問題ありません。

<script src="js/bg-lazyload.js" defer="defer"></script>

既存サイトへの組み込み方法は以上です。
ブラウザのDevToolsを使うなどして、遅延読み込みされるか確認してみましょう。

imageフォルダとその中にある画像について

初期状態ではimageという名前のフォルダがあり、その中に数枚の画像が格納されています。
これは既存サイトに組み込む際には不要ですので、フォルダごと削除しても問題ありません。

注意点

サポートに関して

カスタマイズに関して

ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。

アップデート履歴

2023/04/25　バージョン1.0

• 公開。