jq--图片懒加载

html

1.给图片不给真真意义上的src属性路径，可通过我们自己想要添加时改变它的属性路径即可。

2.要获取浏览器中三种高度。

$(window).height();//屏幕高度

$(window).scrollTop();//滚动条距离顶部的高度

obj.offset().top;//元素距离顶部的高度

3.计算方法：img距离顶部的距离小于屏幕的高度加滚动条距顶部高度时加载图片，给图片设置真真的src属性的路径。

            <i class="displayB tea_proDetailPic"><img class="mI_img1" src="img/tea/tea_proDetail1.png" alt=""></i>

            <i class="displayB tea_proDetailPic"><img class="mI_img1" src="img/tea/tea_proDetail2.png" alt=""></i>

            <i class="displayB tea_proDetailPic tea_picTop"><img class="mI_img1" src="img/tea/tea_proDetail3.png" alt=""></i>

            <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" src="img/tea/tea_proDetail4.png" alt=""></i>

            <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" src="img/tea/tea_proDetail5.png" alt=""></i>

            <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" src="img/tea/tea_proDetail6.png" alt=""></i>

            <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail7.png" alt=""></i>

            <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail8.png" alt=""></i>

            <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail9.png" alt=""></i>

            <i class="displayB tea_proDetailPic tea_changePic"><img class="mI_img1" _src="img/tea/tea_proDetail10.png" alt=""></i>

            <i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail11.png" alt=""></i>

            <i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail12.png" alt=""></i>

            <i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail13.png" alt=""></i>

            <i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail14.png" alt=""></i>

            <i class="displayB tea_proDetailPic"><img class="mI_img1" _src="img/tea/tea_proDetail15.png" alt=""></i>

jq



    ~(function() {

        var teaPic = $(".mI_img1");

        var wH = $(window).height();//屏幕高度

        teaPic.each(function(index,elem) {

            $(window).scroll(function() {

                var sTH = $(window).scrollTop();//滚动条距离顶部的距离

                if( $(".tea_proNav").offset().top < (wH + sTH)- 260 && $(elem).attr("_src") ) {

				    $(elem).attr('src',$(elem).attr('_src'));

			    }

            });

        });

    })();

巴特西

jq--图片懒加载

html

jq

最新文章

热门文章