可以为 <img /> 标签添加 loading 属性为 lazy，除此之外还需要为img标签设置默认的高度，这样就可以实现原生的图片懒加载。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>img</title>
    8.   <style>
    9.     img {
    10.       display: block;
    11.       margin: 1em 0;
    12.     }
    13.   </style>
    14. </head>
    15. <body>
    16.   <div class="container">
    17.   </div>
    18.   <script>
    19.     const ulElement = document.createElement('ul')
    20.     const fragment = document.createDocumentFragment()
    21.     const container = document.querySelector('.container')
    22.     for (let i = 0; i < 20; i++) {
    23.       const li = document.createElement('li')
    24.       const img = document.createElement('img')
    25.       // img.width = 400 + i
    26.       img.height = 400 + i
    27.       img.src = `https://via.placeholder.com/400x400?text=${i}`
    28.       img.loading = 'lazy'
    29.       li.appendChild(img)
    30.       fragment.appendChild(li)
    31.     }
    32.     ulElement.appendChild(fragment)
    33.     container.appendChild(ulElement)
    34.   </script>
    35. </body>
    36. </html>