jquery回到顶部及懒加载基础知识问答

一、问答

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

        function isVisible($node){
            var scrollH=$(window).height()+$(window).scrollTop(),
                selfDoc=$node.offset().top,
                selfH=$node.outerHeight(true);
            if (selfDoc < scrollH && scrollH < selfDoc+selfH ) {
                return true
            }
            else  return false
        }

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


        $(window).on("scroll",function () {
            if (isVisible($node)){
                console.log("true");
            }
        })

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

         $(window).on("scroll",function () {
             $("$node").each(function () {
                 var $cur=$(this);
                 if (lode($cur.attr("isLoded"))){
                     return
                 }
                 if (isVisible($cur)){
                     lode($cur);
                 }
             });
             function lode($ele) {
                 $ele.attr("isLoded",true);
             }
             function isVisible($node){
                 var scrollH=$(window).height()+$(window).scrollTop(),
                         selfDoc=$node.offset().top,
                         selfH=$node.outerHeight(true);
                 if (selfDoc < scrollH && scrollH < selfDoc+selfH ) {
                     return true
                 }
                 else {
                     return false
                 }
             }
     })

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

通过判断当前元素是否出现在浏览器窗口的可视范围内（滚动的垂直距离加上窗口的垂直距离大于指定元素到文档的垂直距离），如果在则立即加载事先设定好的图片【通过属性设置的方法，将自定义的img属性值（预加载的真实url地址）把原有事先设定好的非真实img的src值给替换掉】；

二、代码

（一）、实现如下回到顶部效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            line-height: 3;
        }
        div.ct{
            position: relative;
        }
        div.goTop{
            position: fixed;
            top: 560px;
            left: 1200px;
            border: 1px solid red;
            border-radius: 3px;
            padding: 10px 20px;
            cursor: pointer;
            display: none;
        }

    </style>


</head>
<body>
    <div class="ct">
    <p>内容1</p>
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
    <p>内容1</p>
    <p>内容2</p>
    <p>内容3</p>
        <p>内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p>内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p>内容1</p>
        <p>内容2</p>
        <p>内容3</p>
    <div class="goTop">回到顶部</div>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <script>
        $(window).on("scroll",function () {
            if  (canShow()){
                $(".goTop").css("display","block");

            }
            else {
                $(".goTop").css("display","none");
            }
        });
        $(".goTop").on("click",function () {
            $(window).scrollTop(0);
        });

        function canShow() {
            var winH=$(window).height(),
                scrollH=$(window).scrollTop();

            if ( scrollH > winH ){
                return true;
            }
            else {
                return false
            }
        }

    </script>

</body>
</html>

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/renwu29-1.html

（二）、实现如下图片懒加载效果


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加载更多</title>
    <style>
        ul,li{
            list-style: none;
        }
        .ct{
            margin: 0 auto;
            width: 800px;

        }
        .ct li{
            margin: 10px 10px;
            float: left;
            width: 220px;
        }
        .ct li img{
            width: 220px;
            height: 400px ;
        }
        p{
            float: left;
            width: 50px;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }



    </style>


<body>
<ul class="ct clearfix">
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>

    <p id="hello">hello </p>

    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>
    <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2166980-168c6f835cc50788.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a></li>

</ul>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <script>
        showCheck ();
        $(window).on("scroll",function () {
            showCheck ();
        });
       function showCheck () {
             $(".ct img").each(function () {
                 var $cur=$(this);
                 if ($cur.attr("isLoded")){
                     return
                 }
                 if (isVisible($cur)){
                     lode($cur);
                 }
             });
             function lode($ele) {
                 $ele.attr("isLoded",true);
                 $ele.attr("src", $ele.attr("data-src"))

             }
             function isVisible($node){
                 var scrollH=$(window).height()+$(window).scrollTop(),
                         selfDoc=$node.offset().top;
                 if (selfDoc < scrollH ) {
                     return true
                 }
                 else {
                     return false
                 }
             }
     }
    </script>

</body>
</html>

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/renwu29-2.html

（三）、实现如下无限滚动效果

当页面滚动会无限加载数据展示到页面。当鼠标放置上去会变色。

提示：当底部加载更多按钮出现时，通过 ajax 发送请求获取数据，append 到容器里。事件绑定使用代理方式。
效果预览
ps：自己实现效果后，可参考 demo 里的注释

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>29-3加载更多</title>
    <style>
        ul,li{
            list-style: none;
            color: #000;
            margin: 0;
            padding: 0;

        }
        li{
            border: 1px solid #ddd;
            line-height: 50px;
            height: 50px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        .hover{
            background-color: green;
            color: #fff;

        }
        a{
            text-decoration: none;
            color: #E27272;
            display: block;
            text-align: center;
            height: 40px;
            line-height: 40px;
            width: 100px;
            border: 1px solid #E27272;
            border-radius: 2px;
            margin: 0 auto;

        }
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<ul id="ct">
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
    <li>内容4</li>
    <li>内容5</li>
    <li>内容6</li>
    <li>内容7</li>
    <li>内容8</li>
    <li>内容9</li>
    <li>内容10</li>
    <li>内容11</li>
</ul>
<a id="more" href="####">加载更多</a>
<script>
    var cur=11;
    var clock;
    lodeMore();
    $(window).on("scroll",function () {
        if(clock) clearTimeout(clock);
        clock = setTimeout(function(){
            if(!isVisible($("a#more"))) return;
            lodeMore();
        }, 100);
    });
    function onSuccess(json){
        cur =cur+6;
        append(json.data);
    }

    function append(items){
        for (var i=0;i<items.length;i++){
            $("#ct").append("<li>"+items[i]+"</li>");
        }
    }
    function isVisible($node){
        var winH = $(window).height(),  //窗口高度
                offsetH = $node.offset().top,  //元素到根节点顶部距离
                scrollH = $(window).scrollTop(); //滚动的垂直距离
        if( (offsetH > scrollH)  && (offsetH < scrollH + winH ) ){
            return true;
        }
        return false;
    }
    function lodeMore() {
       $.ajax({
           url:"renwu29_3.php",
           type:"get",
           dataType:"json",
           data: {
               start: cur,
               len: 6
           },
           success:  function(json){
               onSuccess (json)
           },
           error: function(){
               console.log('出错了')
           }
       })
    }

    $("#ct").on("mouseenter","li",function (e) {
        $(this).addClass("hover");
    });
    $("#ct").on("mouseleave","li",function () {
        $(this).removeClass("hover");
    })

</script>

</body>
</html>

php代码：

<?php

    $start = $_GET['start'];
    $len = $_GET['len'];
    $items = array();
    for($i = 0; $i < $len; $i++){
        array_push($items, '内容' . ($start+$i+1));
    }
    $ret = array('status'=>1, 'data'=>$items);
    echo json_encode($ret);
?>

HTML代码预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/3/renwu29-3.html

本地测试成功：

本地测试成功

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

最后编辑于：2017.11.16 11:40:48

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,734评论 6赞 505
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,931评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,133评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,532评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,585评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,462评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,262评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,153评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,587评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,792评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,919评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,635评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,237评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,855评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,983评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,048评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,864评论 2赞 354