画像より前にスクリプトを書くと動かない事もあるので、公開元のドキュメント通り、最後に書くのがいいかな。画像が問題なく表示されていれば、スクリプトが正しく動作しているが、ちょっと分かりづらいのでオプションを付けて動作を確認してみるオプションを付ける場合は、lazyload()内に{}を追加し、付けたいオプションを付ける。分かりやすくするために、thresholdとeffectを付ける。これで、画面外に表示されているはずの画像がスクロールした際に読み込まれ表示されるのが分かる。指定したピクセルの距離まで近づいたら表示。公式サイトでは、以下のコードで遅延処理できると書いているが、jqueryのバージョンの問題か動かない。2000);});遅延処理で行う場合は以下の様に記載して動かすと良いかも。デモでは2秒後になると画像が表示される。公式サイトの説明文では、以下の様に説明されている。アンロードされた画像を介してページプラグインループをスクロールした後。画像が見えるようになったかどうかループチェックします。デフォルトでは、ビューポートの外側の最初の画像が見つかるとループは停止します。これは次の仮定に基づいています。ページ上の画像の順序は、HTMLコード内の画像の順序と同じです。レイアウトによっては、これが間違っている可能性があります。failure_limit設定でロード動作を制御できます。横並びのブロックレイアウトがある場合など、DOM順だとスクロールと意図しない画像の順番になっていることがあるので複数の画像のチェックをすることでそれを防ぐ方法です。その他オプション以外にも色々とできることがあるので、いくつ記載。プレースホルダーの指定。こちらは、通常のsrcに画像が表示されるまでの代替画像を入れることができます。data-original="/imo_common/images/demo/demo1.jpeg">普通にすると代替画像が分かりにくいので、クリックで表示する様にしたデモを用意しました。これだと画面外の画像を表示しようとした際、代替画像が表示されていて、クリックしないと表示されないようになっています。対応してフォールバックする方法が公式で紹介されている。問題なのはプレースホルダーを指定している場合、ジャバスクリプトを無効にしていると、プレースホルダー用の画像とフォールバック用の画像の二つが出てしまう問題がある。cssを追記しておく必要がある。none;}こうすることでジャバスクリプトが無効になっていてフォールバック用の画像が表示されても、プレースホルダー用の画像はnoneになっているので出ない。ジャバスクリプトを無効にした場合、下の二枚はnoscriptがないので、表示されないようにした。自分のサイトのスクリプト置き場に設置する。head内にlazyload.jsのリンクを追加。パスは自分の環境に直して使う。jqueryはいらない。プレースホルダーを指定したい場合は、1.x系と同じでsrcで指定する。data-src="/imo_common/images/demo/demo1.jpeg">最後にスクリプトでlazyloadを指定する。<script>lazyload();</script>公式サイトを見た限りでは、1.x系のようなオプションの指定はできないようなので、基本的にはこれで動かす。一応、今のところ使うかもしれない遅延実行の処理も。使って実行を遅らせるだけ。1000);});</script>一応デモも用意。