jqeury 滚动及图片懒加载

获取页面滚动条到底部的距离/高度

页面局部的滚动条对象

<div class="contact_people" onscroll="uploadUserImg()">
	.....
</div>

使用 document.querySelector(’.contact_people’)作为选择器对象

document.querySelector('.contact_people').addEventListener('scroll',function () {
    //读取内容区域的真实高度（滚动条高）
    console.log(this.scrollHeight);
    //读取滚动条的位置
    console.log(this.scrollTop);
    //读取元素的高度
    console.log(this.clientHeight)
    //意思就是内容总体的高度 - 滚动条的偏移值  === 元素的高度(包含内边)但不包含外边距，边框，以及滚动条
    if(this.scrollHeight - this.scrollTop===this.clientHeight){
        console.log("到达底部");
    }
})

js原生图片懒加载

html 部分

<div class="imgbox">
	<img class="lazy" />
	<img class="lazy" />
	<img class="lazy" />
</div>

js部分

<script>
	var imgs = $('img.lazy');
    function isIn(el) {
        var bound = el.getBoundingClientRect();
        var clientHeight = window.innerHeight;
        return bound.top <= clientHeight;
    }
    function check() {
        Array.from(imgs).forEach(function(el){
            if(isIn(el)){
                loadImg(el);
            }
        })
    }
    function loadImg(el) {
        if(!el.src){
            // console.log('go');
            var source = el.dataset.original;
            el.src = source;
        }
    }
    window.onload = document.getElementsByClassName('contact_people').onscroll = function () {
        check(imgs);
    }
    function uploadUserImg() {
        check(imgs);
    }
</script>