jquery回到頂部及懶加載基礎(chǔ)知識問答

一、問答

1、如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數(shù) isVisible實現(xiàn)
        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、當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)

        $(window).on("scroll",function () {
            if (isVisible($node)){
                console.log("true");
            }
        })
3、當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn).
         $(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、圖片懶加載的原理是什么？

通過判斷當(dāng)前元素是否出現(xiàn)在瀏覽器窗口的可視范圍內(nèi)（滾動的垂直距離加上窗口的垂直距離大于指定元素到文檔的垂直距離），如果在則立即加載事先設(shè)定好的圖片【通過屬性設(shè)置的方法，將自定義的img屬性值（預(yù)加載的真實url地址）把原有事先設(shè)定好的非真實img的src值給替換掉】；

二、代碼

（一）、實現(xiàn)如下回到頂部效果

當(dāng)頁面滾動到一定距離時，窗口右下角會出現(xiàn)回到頂部按鈕，點擊按鈕頁面會滾動到頂部。

<!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>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容2</p>
    <p>內(nèi)容3</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容2</p>
    <p>內(nèi)容3</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容2</p>
    <p>內(nèi)容3</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容2</p>
    <p>內(nèi)容3</p>
    <p>內(nèi)容1</p>
    <p>內(nèi)容2</p>
    <p>內(nèi)容3</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容2</p>
        <p>內(nèi)容3</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容2</p>
        <p>內(nèi)容3</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容2</p>
        <p>內(nèi)容3</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容2</p>
        <p>內(nèi)容3</p>
        <p>內(nèi)容1</p>
        <p>內(nèi)容2</p>
        <p>內(nèi)容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>

預(yù)覽地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/renwu29-1.html

（二）、實現(xiàn)如下圖片懶加載效果

<!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>

預(yù)覽地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/renwu29-2.html

（三）、實現(xiàn)如下無限滾動效果

當(dāng)頁面滾動會無限加載數(shù)據(jù)展示到頁面。當(dāng)鼠標(biāo)放置上去會變色。

提示：當(dāng)?shù)撞考虞d更多按鈕出現(xiàn)時，通過 ajax 發(fā)送請求獲取數(shù)據(jù)，append 到容器里。事件綁定使用代理方式。
效果預(yù)覽
ps：自己實現(xiàn)效果后，可參考 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>內(nèi)容1</li>
    <li>內(nèi)容2</li>
    <li>內(nèi)容3</li>
    <li>內(nèi)容4</li>
    <li>內(nèi)容5</li>
    <li>內(nèi)容6</li>
    <li>內(nèi)容7</li>
    <li>內(nèi)容8</li>
    <li>內(nèi)容9</li>
    <li>內(nèi)容10</li>
    <li>內(nèi)容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,  //元素到根節(jié)點頂部距離
                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, '內(nèi)容' . ($start+$i+1));
    }
    $ret = array('status'=>1, 'data'=>$items);
    echo json_encode($ret);
?>

HTML代碼預(yù)覽地址：https://github.com/have-not-BUG/task/blob/master/renwu/renwu29/3/renwu29-3.html

本地測試成功：

本地測試成功

**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請注明出處。謝謝！ *

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,828評論 25贊 709
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,107評論 1贊 92
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,104評論 4贊 61
  • 明天就是一年一度學(xué)生開學(xué)的日子了，九月一號，在學(xué)生時代是新一年級的挑戰(zhàn)與離開美好暑假的分界領(lǐng)，是樹立新學(xué)期新氣象的...
    一只松鼠閱讀 134評論 0贊 1
  • ListView（列表視圖） 1.常用屬性和方法 footerDividersEnabled：是否在f...
    jadefly閱讀 419評論 0贊 0

友情鏈接更多精彩內(nèi)容