javascriptを使用し10個ぐらいある画像を一括変更しlazyload遅延読みこみをさせたいです。

前提・実現したいこと

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトル</title>

    <!--Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!--Font Awesome5-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
    <script>
        window.onload = function () {
            let elements = document.getElementsByTagName("img");
            let img_el = document.getElementById('test');
            img_el.da
            Array.prototype.forEach.call(elements, function (element) {
                element.classList.add("lazyload");
            });
            lazyload();
        }
    </script>
</head>

<body style="background-color: #eeeeee;">
    <div class="example" style="margin-bottom: 100px;">
        <img src="./img/download.png" width="50%" id="test" />
    </div>
    <div class="example" style="margin-bottom: 100px;">
        <img src="./img/download.png" width="50%" />
    </div>
    <div class="example" style="margin-bottom: 100px;">
        <img src="./img/download.png" width="50%" />
    </div>
    <div class="example" style="margin-bottom: 100px;">
        <img src="./img/download.png" width="50%" />
    </div>
    <div class="example" style="margin-bottom: 100px;">
        <img src="./img/download.png" width="50%" />
    </div>
    <div class="example" style="margin-bottom: 100px;">
        <img src="./img/download.png" width="50%" />
    </div>
    <div class="example" style="margin-bottom: 100px;">
        <img src="./img/download.png" width="50%" />
    </div>
    <div class="example" style="margin-bottom: 100px;">
        <img src="./img/download.png" width="50%" />
    </div>
    <div class="example" style="margin-bottom: 100px;">
        <img src="./img/onmouseover-onmouseout-over.png" width="50%" />
    </div>
</body>

</html>

試したこと

classにlazyloadを追加できましたが、src属性をdata-src属性に変更できません。

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

回答1件

ベストアンサー

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  document.querySelectorAll("img").forEach(x=>{
3    x.setAttribute("data-src",x.getAttribute('src'));
4    x.removeAttribute("src");
5    x.classList.add("lazyload");
6  });
7});

投稿2021/05/18 01:54

yambejp

総合スコア116724

kabure_fs

2021/05/18 02:49

ご回答ありがとうございます！上記で src属性をdata-src属性に変更を確認できました。ありがとうございます！ lazyload(); を読み込ませるタイミングはどこになりますでしょうか？遅延読みこみが実現できません。ご確認の程よろしくお願い致します。

yambejp

2021/05/18 02:54

lazyload()の仕組みをあまり理解していませんが document.querySelectorAll("img").forEach(x=>{ 　・・・ }); lazyload(); のような並びになるのでは？

kabure_fs

2021/05/18 03:05 編集

ご連絡ありがとうございます! 上記試したのですが下記のようにsrc="./img/download.png"が後ろについてきてしまいます。 https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js <img width="50%" data-src="./img/download.png" class="lazyload" src="./img/download.png">

yambejp

2021/05/18 03:57

lazyloadの仕組みがわからないのでなんともですが、最終的にはsrcが付加されるから遅延表示されるんじゃないのですか？よくわからないですが window.addEventListener('pageshow', ()=>{ lazyload(); }); みたいに制御をわけてみるとか？

kabure_fs

2021/05/18 05:12

ご連絡ありがとうございました！実現できました！本当にありがとうございます！また何かありましたご相談させていただきます！

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