画像ファイルを9個縦に並べファイルの中の画像全体に対してlazyloadの設定をしたい。lazyloadがうまく読み込めない。

画像ファイルを9個縦に並べファイルの中の画像全体に対してlazyloadの設定をしたい。
①src属性をdata-src属性に変更
②classにlazyloadを追加

jsを作成しファイルの中の画像全体に対して①②の対応をしている。
imgタグに①②の対応はできていると思うのですが、lazyload();を読み込めず実現できていません。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <title>work</title>
9    <!--Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
11
12    <!-- layzyload -->
13    <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
14    <script>
15        window.addEventListener('DOMContentLoaded', () => {
16            document.querySelectorAll("img").forEach(x => {
17                x.setAttribute("data-src", x.getAttribute('src'));
18                x.removeAttribute("src");
19                x.classList.add("lazyload");
20            });
21            lazyload();
22        });
23    </script>
24    <!-- end-layzyload -->
25</head>
26
27<body style="background-color: #eeeeee;">
28    <div class="example" style="margin-bottom: 100px;">
29        <img src="./img/download.png" width="50%" />
30    </div>
31    <div class="example" style="margin-bottom: 100px;">
32        <img src="./img/download.png" width="50%" />
33    </div>
34    <div class="example" style="margin-bottom: 100px;">
35        <img src="./img/download.png" width="50%" />
36    </div>
37    <div class="example" style="margin-bottom: 100px;">
38        <img src="./img/download.png" width="50%" />
39    </div>
40    <div class="example" style="margin-bottom: 100px;">
41        <img src="./img/download.png" width="50%" />
42    </div>
43    <div class="example" style="margin-bottom: 100px;">
44        <img src="./img/download.png" width="50%" />
45    </div>
46    <div class="example" style="margin-bottom: 100px;">
47        <img src="./img/download.png" width="50%" />
48    </div>
49    <div class="example" style="margin-bottom: 100px;">
50        <img src="./img/download.png" width="50%" />
51    </div>
52    <div class="example" style="margin-bottom: 100px;">
53        <!-- lazyload -->
54        <!-- <img data-src="./img/panda.png" width="50%" class="lazyload"/> -->
55        <img src="./img/panda.png" width="50%" />
56        <!-- end-lazyload -->
57    </div>
58    <!-- <script>
59        lazyload();
60    </script> -->
61</body>
62
63</html>

■実現したいNetworkの記載
Initiator
index.html
lazyload.js:115

↓
Initiator
lazyload.js:115

Lhankor_Mhy

2021/05/20 07:25

「lazyload();を読み込めず」とは具体的には何が起きていますか？エラーメッセージなどをご提示ください。 --- なお、ご存知かと思いますが、ネイティブで同様の機能があります。 https://www.suzukikenichi.com/blog/native-image-lazy-loading-is-now-officially-a-web-standard/ ブラウザの対応状況ですが、IE11で使えず、iOSがまだ、というありがちなやつです。 https://caniuse.com/loading-lazy-attr

kabure_fs

2021/05/20 10:00

ご回答ありがとうございます！正しくはlazyload();を読み込めていました。。。エラーはないです。 googleDeveloper ToolでNetworkで遅延して読み込まれるはずが、ファイル読み込み時に読み込まれてしまい、ファイル上での読み込みとlazyload()での読み込みが2回発生してしまっている。 ↓ 実現したいことファイル上での読み込みが遅延され lazyload()で遅延して読み込まれてほしいです。ご確認の程よろしくお願い致します。

kabure_fs

2021/05/20 10:04

上記に下記の説明追加しました。 ■実現したいNetworkの記載 Initiator index.html lazyload.js:115 ↓ Initiator lazyload.js:115

行動規範の内容に同意します

回答1件

ソースを少し書き直して検証してみました。
画像は、ローカルのファイルよりも、ネットワークで取得できる画像の方が、よりよくテストできそうです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <title>work</title>
9    <!--Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
11
12    <!-- layzyload -->
13    <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
14    <script>
15        window.addEventListener('DOMContentLoaded', () => {
16            document.querySelectorAll("img").forEach(x => {
17                x.setAttribute("data-src", x.getAttribute('src'));
18                x.removeAttribute("src");
19                x.classList.add("lazyload");
20            });
21            lazyload();
22        });
23    </script>
24    <!-- end-layzyload -->
25</head>
26
27<body style="background-color: #eeeeee;">
28    <div class="example" style="margin-bottom: 100px;">
29        <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u18/187374/4WLewvJw_thumbnail.jpg" width="50%" />
30    </div>
31    <div class="example" style="margin-bottom: 100px;">
32        <img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u18/187374/4WLewvJw_thumbnail.jpg" width="50%" />
33    </div>
34
35</body>
36
37</html>