jquery实现

做图片滚动加载的时候会判断图片是否在可视区域内,如果在就加载原地址图片,下面借用jquery实现这个功能

首先看下面函数

$('#dom').offset().top
//元素的绝对偏移量,指元素的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变
$('#dom').outerHeight()
//元素的实际尺寸,即 height+padding+border
$('#dom').outerHeight(true)
//#dom的实际尺寸及外边距,即 height+padding+border+margin
$(window).scrollTop()
//窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离
$(window).height()
//浏览器窗口可视区域的高度

第一种情况页面向上滚动(元素跑到最上面并且也看不到啦)

$(window).scrollTop()>($('#dom').offset().top+$('#dom').outerHeight())
//如果上面代码为true说明元素不可见

另一种情况就是页面向下滚动(元素跑到最下面并且也看不到啦)

$(window).scrollTop()+$(window).height()<$('#dom').offset().top()
//元素的顶部偏移量大于浏览器滚动上去的加上窗口的高度的和(返回值为true)就说明元素在浏览器下面不可见

下面把判断元素是否可见的方法写成一个函数可以直接调用

var isVisible = function(selectid) {
            var o;
            if ('object' === typeof selectid) {
                o = selectid;
            } else {
                o = $(selectid);
            }
            var of = o.offset();
            var w = $(window);
            return !(w.scrollTop() > (of.top + o.outerHeight()) || (w.scrollTop() + w.height()) < of.top);
}

传入jquery的选择器id就可以

原生js实现

var isVisible = function(dom) {
    var scrTop = document.documentElement.scrollTop || document.body.scrollTop;
    return !(scrTop > (dom.offsetTop + dom.offsetHeight) || (scrTop + window.innerHeight) < dom.offsetTop);
}
var dom = document.getElementById('loadmorebtn');
console.log(isVisible(dom))

兼容性只在谷歌测试过，其它浏览器没有测试