なぜ遅延読み込みを実装するのですか？？メリットは何ですか？写真の遅延読み込みの原則は？？

以前に見た遅延読み込みは、通常、次の形式です。

。Webページを参照し、スクロールバーを下にドラッグする準備をします
。プレースホルダー画像をウィンドウにドラッグします
。プレースホルダー画像は即座に最終画像に置き換えられます。
理由：たとえば
、タオバオ、ジンドンなど、ページに多くの画像があります。ホームページなど、起動後すぐに大量のリクエストが送信されると、ページの読み込みに非常に時間がかかります。jsファイルがドキュメントの下部に配置されている場合、ページの先頭がこれに依存していることがあります。 jsファイルの場合、取り扱いが困難になります。さらにひどいのは、立ち上がってすぐに100または80のリクエストを送信すると、サーバーが圧倒される可能性があることです（このページにアクセスするのは、1人または2人だけではありません）。

したがって、利点は明らかです。サーバーへの負荷を軽減できるだけでなく、ロードされたページをユーザーにすばやく表示できます（優れたユーザーエクスペリエンス）。
原則：
　　
　　主な実現アイデア：
　　スクロールサイズと画面の高さの合計が要素の上部からの距離よりも大きい場合は、タイマーを設定して遅延読み込み効果を作成します。つまり、スクロールバーをスライドして写真を見て、それをロードさせてください

   <img src="/image/8.jpg" data-src="/image/1.png" alt="">
    <img src="/image/8.jpg" data-src="/image/2.png" alt="">
    <img src="/image/8.jpg" data-src="/image/3.png" alt="">
    <img src="/image/8.jpg" data-src="/image/4.png" alt="">
    <img src="/image/8.jpg" data-src="/image/5.png" alt="">
    <img src="/image/8.jpg" data-src="/image/6.png" alt="">
    <img src="/image/8.jpg" data-src="/image/7.png" alt="">

js、主にjqueryで実装

 $(window).scroll(handleScroll)
    function handleScroll() {
        let imgs = $('img[data-src]');
        console.log(imgs)
        //获取滚动的值
        let bodyScrollHeight = document.body.scrollTop || document.documentElement.scrollTop
        console.log(bodyScrollHeight)
        //获取可视高度(屏幕高度)
        let windowHeight = window.innerHeight
        console.log(windowHeight)
        for (let i = 0; i < imgs.length; i++) {
             // 获取元素到浏览器顶部的距离
            let imgHeight = $(imgs[i]).offset().top
           // console.log(imgHeight)
           // 如果滚动的大小和屏幕高度之和大于元素到顶部的距离
            if (imgHeight < windowHeight + bodyScrollHeight) {
                //setTimeout:设置一个定时器，制造懒加载的延迟加载的效果
                setTimeout(function () {
                    $(imgs).eq(i).attr('src', $(imgs).eq(i).attr('data-src'))
                }, 1000)
            }
        }
    }
    handleScroll()

実装のためのより簡単なアイデアはありますか？？？