lazysizesの使い方

lazysizesの使い方について知りたいです。

https://wemo.tech/207や、他のlazysizesの使い方に関してのページを参照にしようとしているのですが、
どのサイトというか記事も初心者の私には難しく、理解しかねています。

まず、はじめにlazysizesを公式サイトであるhttp://afarkas.github.io/lazysizes/からZIPフォルダでダウンロードしました。

そこで、たとえばhttps://wemo.tech/207の方の説明には「たくさんファイルがありますが、基本となるのはlazysizes.min.js（またはlazysizes.js）というファイル。」と書かれていました。

私がダウンロードしたフォルダの中にはlazysizes.min.jsというファイルが見当たらなかったですが、lazysizes.jsというファイルはありました。
↓
そこで、lazysizes.jsファイルをエディタに読み込んだのですが、そこから何をどうすればいいのかわかりません(汗)

1.<script src="lazysizes.min.js"></script>
こんな感じでscriptタグで読み込みます。

これで、imgタグの画像とiframeが遅延読み込み可能になる。使い方は下の通り、data-srcに画像のパスを記述して”lazyload”とうクラスを付けるだけ。
1.<img data-src="image.jpg" class="lazyload" />
2.<iframe class="lazyload" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"></iframe>

と、https://wemo.tech/207では説明されているのですが、何をどうしたらいいのか全然わかりません。

どなたかlazysizesの使い方を詳しくわかる方、居ませんでしょうか？

kei344

2018/02/19 14:24

具体的に何がしたくて何がわからないのでしょうか。

x_x

2018/02/20 02:29

エディタに読み込めとは書いてないですよね。説明通りにしてみてはどうでしょう

unz.hori

2018/02/20 02:34

単に画像を表示する場合は、<img src="image.jpg" />で遅延読み込みさせたい場合は、<img data-src="image.jpg" class = "lazyload" />と記述するだけって書いてありますけどね。そういう動作にならないんでしょうか？

vokegs

2018/02/20 09:56 編集

〈補足〉目的としましては、lazysizesを設定(使用)して表示速度がどれだけ変わるのか確認したいです。 https://wemo.tech/207 または http://oxynotes.com/?p=10810 を参考にしようと読んだのですが、 http://oxynotes.com/?p=10810に書かれている「lazysizes」をGitHubの公式ページからダウンロード。」と書かれているのですが、これはダウンロード済みなのです。次に、「解凍して「lazysizes.min.js」をHTMLで読み込みます。」とあるのですが、このやり方がわかりません。エディタで開くという事なのかと思い、開きましたが、かといって開いてから何もわからずです。だいぶこの手の事に初心者なので説明不足ですみません。どうぞ宜しくお願いします。

unz.hori

2018/02/20 09:56

unz.hori

2018/02/20 09:57

参考サイトのリンク先(GitHub):https://github.com/aFarkas/lazysizesにlazysizes.min.jsはありますよね？

vokegs

2018/02/20 10:00

ありがとうございます。https://github.com/aFarkas/lazysizesからDLしたフォルダの中に「lazysizes.min」という名前のファイルはあります。

unz.hori

2018/02/20 10:01

いや、GitHubのページにそのままファイル(lazysizes.min.js)へのリンクが存在しますよ。

vokegs