jquery懒加载、回到顶部

思考

1、如果窗口resize了
2、如果节点加入重复了
3、怎样判断元素是在视窗范围内*

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

滚动条滚动距离+可视窗口高度>元素到页面顶部的距离就说明元素出现在可视范围内了。

function isVisible($node) {
    var windowHeight = $(window).height(),
    scrollTop = $(window).scrollTop(),
    offsetTop = $node.offset().top,
    nodeHeight = $node.height();
    if (windowHeight+scrollTop>offsetTop && scrollTop<(offsetTop+nodeHeight)){
        return true;
    }else{
        return false;
    }
}

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

 <!DOCTYPE html>
 <html lang="en">
<head>
     <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        font: 20px/1.5 Helvetica, arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
        background: #FF9279;
        padding: 30px;
        height: 2500px;
    }
    #hello{
        position: absolute;
        top: 1500px;
        left: 40%;
        padding: 50px;
        border: 2px solid #FF0500;
        background: #0096CC;
    }      
</style>
</head>
<body>
<p id="hello">hello</p>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
   $(window).on('scroll',function result(){
        if(isVisible($('#hello'))){
            console.log(true);
        }
        else{
            console.log(false);
        }
    }) 
    function isVisible($node){
        var windowHeight = $(window).height(),
    scrollTop = $(window).scrollTop(),
    offsetTop = $node.offset().top,
    nodeHeight = $node.height();
    if (windowHeight+scrollTop>offsetTop && scrollTop<offsetTop+nodeHeight){
        return true;
    }else{
        return false;
    }
    }
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        font: 20px/1.5 Helvetica, arial, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
        background: #FF9279;
        padding: 30px;
        height: 2500px;
    }
    #hello{
        position: absolute;
        top: 1500px;
        left: 40%;
        padding: 50px;
        border: 2px solid #FF0500;
        background: #0096CC;
    }      
</style>
</head>
<body>
<p id="hello">hello</p>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
    function result(){
        if($('#hello').not('.show').length === 1 && isVisible($('#hello'))){
            console.log(true);
            $('#hello').addClass('show');
        }
        else if(!isVisible($('#hello'))){
            console.log(false);
        }
    }

   $(window).on('scroll',result);

    function isVisible($node){
    var windowHeight = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offsetTop = $node.offset().top,
        nodeHeight = $node.height();
        if (windowHeight+scrollTop>offsetTop && scrollTop<offsetTop+nodeHeight){
        return true;
    }else{
        return false;
    }
    }
</script>
</body>
</html>

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

为什么要懒加载（延迟）？

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。
这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

原理：
为了整体网站的性能考虑，是一种延时加载图片的方法。把图片真实的URL 放在data-src的值中,当图片进入可视区域的瞬间把data-src赋给src。
注：图片要指定宽高

![](default.jpg)

当载入页面时，先把可视区域内的img标签的data-src属性值赋给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

具体实现详解

5、实现视频中的图片懒加载效果

代码

6、实现视频中的新闻懒加载效果

代码

附：clientHeight/scrollHeight/offsetHeight的区别？

QQ图片20170216040157.png