【JQuery】画像が画面に入った瞬間「ふわっ」と画像を表示する「LazyLoad.js」の実装方法

公開日：2013/10/20

更新日：2014/03/15

カテゴリー: JQuery

いろいろなサイトを見ていると、ページをスクロールしていき、画像が画面内に入った瞬間に「ふわっ」と画像が表示されるサイトがあります。この実装方法はとても簡単で、JQueryの「LazyLoad.js」を使用するだけです。

１．「LazyLoad.js」をダウンロード

こちらよりダウンロードできます。画面の一番下にある「Download」という項までいき、「source」という部分を右クリックし、「対象をファイルに保存」します。

２．代替画像をダウンロード

後ほど説明しますが、「jquery.lazyload.js」では代替画像（表示させたい画像の前に表示させる画像）が必要になります。この代替画像はこちらよりダウンロードしてください（右クリック→保存）。

上の代替画像ですが、これは私が準備したもの（1px×1pxの透過gif）で、オリジナルの画像を使用してもOKです。

３．ファイルをアップロード

ダウンロードした「jquery.lazyload.js」ファイルと代替画像「lazyload.gif」を、FFFTPなどを使ってサイトのルート（index.htmlなどのトップページファイルがあるところ）にアップロードします（階層構造に詳しい人は任意の場所でOK）。

４．ファイルの<head>に必要事項を記述

ファイルのHTMLの<head>部分に以下のタグを記述

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
  $(function() {
    $("img.lazy").lazyload({
      effect: "fadeIn"
    });
  });
</script>