前端基础（问答22）

---

keywords: jQuery懒加载、回到顶部。

---

• 如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

元素可见：元素上边缘在窗口内或元素下边缘在窗口内，即为元素可见。

function isVisible($node) {
    var offTop = $node.offset().top         //$node当前位置的坐标，以文档为参照
    var $nodeH = $node.height()             //$node高度
    var curTop = $(window).scrollTop()      //window上边缘离页面顶部的距离
    var winH = $(window).height()           //window高度
    if ((curTop + winH) > offTop && curTop <= (offTop + $nodeH)) {
        return true
    } else  return false
}

• 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

function isVisible($node) {
    var offTop = $node.offset().top         //$node当前位置的坐标，以文档为参照
    var $nodeH = $node.height()             //$node高度
    var curTop = $(window).scrollTop()      //window上边缘离页面顶部的距离
    var winH = $(window).height()           //window高度
    if ((curTop + winH) > offTop && curTop <= (offTop + $nodeH)) {
        return true
    } else  return false
}

$(window).on('scroll',function() {
    var $isVisible = isVisible($node)
    console.log($isVisible)
})

• 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

function isVisible($node) {
    var offTop = $node.offset().top         //$node当前位置的坐标，以文档为参照
    var $nodeH = $node.height()             //$node高度
    var curTop = $(window).scrollTop()      //window上边缘离页面顶部的距离
    var winH = $(window).height()           //window高度
    if ((curTop + winH) > offTop && curTop <= (offTop + $nodeH)) {
        return true
    } else  return false
}
var $isVisible    //记忆元素可见状态
$(window).on('scroll',function() {
    if ($isVisible) return
    if (isVisible($node)) {
        console.log(true)
        $isVisible = true
    }
})

• 图片懒加载的原理是什么？

懒加载：即图片延迟加载。对于有大量图片加载的网站，为优化网络请求，我们可以只加载用户直接面对的第一屏内容，当用户向下滚动至第二屏时，再加载第二屏内容。

原理：在待显示的img标签中加占位图片，真实地址放在自定义属性data-src中，当图片可见时，将src改写成图片的真实地址。

代码

• 实现如下回到顶部效果

当页面滚动到一定距离时，窗口右下角会出现回到顶部按钮，点击按钮页面会滚动到顶部。

效果+代码

• 实现如下图片懒加载效果

效果+代码

• 实现如下无限滚动效果

效果+代码