jquery对大量图片进行懒加载

jquery对大量图片进行懒加载

<script src="../js/jquery.js"></script>

    <div class="box">

            <div class=""
                style="background: #EDEDED; font-size: 0.16rem; width: 100%; text-align: center; line-height: 0.11rem; height: 0.11rem;">
                <span class="spa">X</span>
                产品条款 </div>

        </div> </div>
    <div class="center"></div>

    <div class="content" style="padding-bottom: 5%;">
        <div>

            <div class="container">

                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no1.jpg" />
                </div>

                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no2.jpg" />
                </div>

                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no3.jpg" />
                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no4.jpg" />
                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no5.jpg" />
                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no6.jpg" />
                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no7.jpg" />
                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no8.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no9.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no10.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no11.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no12.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no13.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no14.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no15.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no16.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no17.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no18.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no19.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no20.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no21.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no22.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no23.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no24.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no25.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no26.jpg" />
                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no27.jpg" />
                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no28.jpg" />
                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no29.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no30.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no31.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no32.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no33.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no34.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no35.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no36.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no37.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no38.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no39.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no40.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no41.jpg" />

                </div>
                <div class="image">
                    <img alt="" src="" data-img="../img/loading/no42.jpg" />

                </div>



            </div>


        </div>


        <div>

        </div>


    </div>
    <p class="tbsm_bottomBtn" style="color: #fff ; ">返回</p>

</div>
<script>
    let $container = $('.container'),
        $imgBoxs = $container.children('.image'),
        $window = $(window);

    //on 函数 绑定多个事件  onload和onscroll触发时执行同一事件
    $(window).on('load scroll', function () {
        // outerHeight()相当于原生offsetHeight,  offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。
        //offset().top相当于offsetTop          offsetTop 当前元素顶部距离最近父元素(具有定位relative，absolute，fixed)顶部的距离,若父亲都没有定位 则为body和有没有滚动条没有关系

        let b = $window.outerHeight() + $window.scrollTop();
        //循环所有图片盒子
        $imgBoxs.each(function (index, item) {
            //将item转化为jquery对象

            let $item = $(item),
                $itemA = $item.outerHeight() + $item.offset().top,
                isload = $item.attr('isLoad');
            // console.log( $itemA)
            if ($itemA <= b && isload !== 'true') {
                let $img = $item.children('img');

                $item.attr('isLoad', true);//attr存储自定义属性值都是字符串格式'true'
                $img.attr('src', $img.attr('data-img'));
                $img.on('load', function () {

                    $img.stop(true, true).fadeIn(1800)
                });
            }
        });

    })


</script>