【js】「layzr.js」を使って画像、iframeの読み込みを遅らせる方法

遅延読み込みを行う「layzr.js」を使用

bodyの終わりにでも追加

//cdnを読み込みます
<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/1.4.3/layzr.min.js"></script>
//最低限の設定
<script>var layzr = new Layzr();</script>

「src」を「layzr.js」のカスタムデータ属性に差し替え

「data-layzr」というカスタムデータ属性に「src」を差し替え

//画像
<img src="URL">
↓
<img data-layzr="URL">

//iframe
<iframe src="URL"></iframe>
↓
<iframe data-layzr="URL"></iframe>

これで、最初に読み込まず画面内に入ってから読みませることができる