

【サンプル】デフォルト
画像(img)に「lazyload」というクラスを付けます。
遅延表示されると「lazyloaded」というクラスに変わります。
※ Chromeの検証ツールで確認するとよくわかります。
HTMLとCSSはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | < div class = "section" > < div class = "imgBox" > < img data-src = "https://125naroom.com/demo/img/simple01.jpg" alt = "" class = "lazyload" > </ div > < div class = "imgBox" > < img data-src = "https://125naroom.com/demo/img/simple02.jpg" alt = "" class = "lazyload" > </ div > < div class = "imgBox" > < img data-src = "https://125naroom.com/demo/img/simple03.jpg" alt = "" class = "lazyload" > </ div > </ div > |
CSS
1 2 3 4 5 6 7 8 9 | .imgBox { text-align : center ; margin : 50px 0 ; } .imgBox img { max-width : 100% ; height : auto ; vertical-align : top ; } |
【サンプル】フェードイン(ふわっと)で変わる
画像(img)に「lazyload」というクラスを付けます。
遅延表示されると「lazyloaded」というクラスに変わります。
※ Chromeの検証ツールで確認するとよくわかります。
HTMLとCSSはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | < div class = "section" > < div class = "imgBox fade" > < img data-src = "https://125naroom.com/demo/img/simple01.jpg" alt = "" class = "lazyload" > </ div > < div class = "imgBox fade" > < img data-src = "https://125naroom.com/demo/img/simple02.jpg" alt = "" class = "lazyload" > </ div > < div class = "imgBox fade" > < img data-src = "https://125naroom.com/demo/img/simple03.jpg" alt = "" class = "lazyload" > </ div > </ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .imgBox { text-align : center ; margin : 50px 0 ; } .imgBox img { max-width : 100% ; height : auto ; vertical-align : top ; } .imgBox.fade img { opacity : 0 ; transform : translate ( 0 , 50px ); transition : 2 s; } .imgBox.fade img.lazyloaded { transform : translate ( 0 , 0 ); opacity : 1 ; } |
【サンプル】フェードイン(ふわっと)で変わるタイミングを変える
画像(img)に「lazyload」というクラスを付けます。
遅延表示されると「lazyloaded」というクラスに変わります。
※ Chromeの検証ツールで確認するとよくわかります。
HTMLとCSSはこちら
HTML
1 2 3 4 5 6 7 8 9 10 11 | < div class = "section" > < div class = "imgBox fade" data-expand = "-50" > < img data-src = "https://125naroom.com/demo/img/simple01.jpg" alt = "" class = "lazyload" > </ div > < div class = "imgBox fade" data-expand = "-50" > < img data-src = "https://125naroom.com/demo/img/simple02.jpg" alt = "" class = "lazyload" > </ div > < div class = "imgBox fade" data-expand = "-50" > < img data-src = "https://125naroom.com/demo/img/simple03.jpg" alt = "" class = "lazyload" > </ div > </ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .imgBox { text-align : center ; margin : 50px 0 ; } .imgBox img { max-width : 100% ; height : auto ; vertical-align : top ; } .imgBox.fade img { opacity : 0 ; transform : translate ( 0 , 50px ); transition : 2 s; } .imgBox.fade img.lazyloaded { transform : translate ( 0 , 0 ); opacity : 1 ; } |
【サンプル】背景画像を遅延表示させる
背景画像の要素に「lazyload」というクラスを付けます。
遅延表示されると「lazyloaded」というクラスに変わります。
※ Chromeの検証ツールで確認するとよくわかります。
HTMLとCSSはこちら
HTML
1 2 3 | < div class = "bg_area lazyload" data-bg = "https://125naroom.com/demo/img/simple01.jpg" > < p >今日も楽しかったです</ p > </ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .bg_area { padding : 20% ; text-align : center ; background-size : cover ; background-repeat : no-repeat ; background-position : center ; } .bg_area p { display : inline-block ; font-size : 20px ; background : #fff ; padding : 20px ; margin : 0 ; } |
【サンプル】iframeを遅延表示させる
iframeに「lazyload」というクラスを付けます。
遅延表示されると「lazyloaded」というクラスに変わります。
※ Chromeの検証ツールで確認するとよくわかります。
HTMLとCSSはこちら
HTML
1 2 3 | < div class = "move" > < iframe class = "lazyload" width = "560" height = "315" data-src = "https://www.youtube.com/embed/L64VWQiQ3VU" frameborder = "0" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></ iframe > </ div > |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | . move { position : relative ; width : 100% ; padding-top : 56.25% ; margin : 2.6em 0 1.6em ; vertical-align : middle ; } . move iframe { position : absolute ; top : 0 ; right : 0 ; width : 100% ; height : 100% ; } |
『lazysizes』のダウンロード
まずは『lazysizes』に必要なファイルを下記サイトからダウンロードします。
『lazysizes』の使い方
ダウンロードファイルの中で必要なファイルは以下の1点です。
- lazysizes.min.js
- ls.unveilhooks.min.js (背景画像の場合は必要)
※『min』のついてないファイルでもオッケーです。『min』が付いているファイルは改行などがない容量軽減版になります。
HTML
1 2 | < script type = "text/javascript" src = "js/lazysizes.min.js" ></ script > < script type = "text/javascript" src = "js/ls.unveilhooks.min.js" ></ script >(背景画像の場合は必要) |
CDNを使う場合は、
1 2 | < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/lazysizes.min.js" ></ script > < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.0/plugins/unveilhooks/ls.unveilhooks.min.js" ></ script > |
メモ
『lazysizes』のことで何かわからないことがあれば『lazysizes』公式サイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに

