懶加載

1. 如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）日熬。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)

function isVisible($node){
    var windowHeight = $(window).height(),//瀏覽器窗口可視區(qū)域的高度
          scrollTop = $(window).scrollTop(),//窗口滾動(dòng)的頂部偏移量,即此時(shí)頁面的上邊界到可視區(qū)域的上邊界的偏移量,簡單的可以理解成整個(gè)頁面滾動(dòng)了多少距離
          offsetTop = $node.offset().top,//元素的絕對(duì)偏移量,指元素的實(shí)際尺寸(即不包括外邊框margin)的上邊界到頁面頂端的距離.這個(gè)值不隨窗口滾動(dòng)而改變
          nodeHeight = $node.outerHeight();//元素的實(shí)際尺寸,即 height+padding+border,
                                           // $('#dom').outerHeight(true)#dom的實(shí)際尺寸及外邊距,即 height+padding+border+margin
if(windowHeigth+scrollTop>offsetTop && scrollTop<offsetTop+nodeHeight){
     return true;
   }else{
     return false;
   } 
                 //scrollTop< offsetTop+nodeHeight瀏覽器上邊緣
                 //windowHeight+scrollTop>offsetTop瀏覽器下邊緣
}

2.當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍友题。每次出現(xiàn)都在控制臺(tái)打印 true 郁季。用代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>懶加載2</title>
    <style>
         body{
            font: 20px/1.5 ;
            background: #FF9279;
            padding: 30px;
            height: 2500px;
        }
        .p1{
            position: absolute;
            top: 1500px;
            left: 40%;
            padding: 50px;
            border: 2px solid #FF0500;
            background: #0096CC;
        }      

    </style>
</head>
<body>
    <p class="p1">hello</P>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        $(window).on('scroll',function(){
            if(isShow($('.p1'))){
                console.log(true)
            }else{
                console.log(false)
            }
        })
         function isShow($node){
              var windowHeight = $(window).height(),
                  scrollTop    = $(window).scrollTop(),
                  offsetTop    = $node.offset().top,
                  nodeHeight   = $node.outerHeight();
                  if(windowHeight+scrollTop>offsetTop && scrollTop <offsetTop +nodeHeight){
                      return true
                  }else{
                      return false;
                  }
         }
    </script>
</body>
</html>

20170325_150941.gif

3. 當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍浴骂。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true乓土，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)

<p class="p1">hello</P>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        var lock = false//設(shè)置一個(gè)鎖
        $(window).on('scroll',function(){
           if(!lock){//在滾動(dòng)時(shí)不會(huì)在執(zhí)行下面函數(shù)
               isShow($('.p1'))
           }
        })
         
         function isShow($node){
              var windowHeight = $(window).height(),
                  scrollTop    = $(window).scrollTop(),
                  offsetTop    = $node.offset().top,
                  nodeHeight   = $node.outerHeight();
                  if(windowHeight+scrollTop>offsetTop && scrollTop <offsetTop +nodeHeight){
                      
                      console.log(true)
                      lock = true;//當(dāng)?shù)谝怀霈F(xiàn)在可是區(qū)時(shí)把鎖設(shè)置true
                      return true

                  }else{
                      return false;
                  }
         }

<body>
    <p class="p1">hello</P>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        
        $(window).on('scroll',function(){
            isCheck($('.p1'))
        })
         
         function isShow($node){
              var windowHeight = $(window).height(),
                  scrollTop    = $(window).scrollTop(),
                  offsetTop    = $node.offset().top,
                  nodeHeight   = $node.outerHeight();
                  if(windowHeight+scrollTop>offsetTop && scrollTop <offsetTop +nodeHeight){
                      return true

                  }else{
                      return false;
                  }
         }

         function isCheck($node){
             if($node.not('.load').length===1&& isShow($node)){
                 console.log(true)
                 $node.addClass('load')
             }else{
                 return;
             }
         }
    </script>
</body>

20170325_163904.gif

4. 圖片為什么懶加載，懶加載的原理是什么趣苏？

為什么懶加載：如果頁面的圖片過多狡相，打開時(shí)頁面時(shí)會(huì)同時(shí)發(fā)很多請(qǐng)求去加載圖片，會(huì)阻塞頁面的加載速度食磕。
原理：把圖片的src放在自定義的屬性上data-src尽棕，當(dāng)滾動(dòng)頁面時(shí)把可視區(qū)的圖片自定義屬性值換成src屬性值。

5.實(shí)現(xiàn)圖片的懶加載

  <script>
        check(); //打開網(wǎng)頁把在可視區(qū)的img展示出來
        $(window).on('scroll', check)

        function  check(){
            $('.container img').not('.load').each(function(){//遍歷沒有.load的img
                if(isShow($(this))){//如果在可視區(qū)
                    show($(this))//執(zhí)行函數(shù)
                }
            })
        } 



        function show($imgs){
            $imgs.each(function(){//遍歷所有imgs
                var imgUrl = $(this).attr('data-src');//獲取自定義屬性
                $(this).attr('src',imgUrl);//改變自定義的屬性值
                $(this).addClass('load')
            })
        }


        function isShow($node){
            var windowHeight = $(window).height(),
                scrollTop = $(window).scrollTop(),
                offsetTop = $node.offset().top,
                nodeHeight = $node.height();
            if(windowHeight+scrollTop>offsetTop && scrollTop< offsetTop+nodeHeight){//可視區(qū)域
                return true;
            }else{
                return false;
            }     
        }
    </script>

20170325_171127.gif

6.懶加載新聞

    <style>
        html,body,h2,p,ul,li{
            margin:0px;
            padding:0px;
            list-style: none;
        }
        a{
            color:#333;
            text-decoration:none;
        }
        .container{
            width:600px;
            margin:0 auto;
        }
        .item{
            margin-top:20px;
        }
        .item:after{
            content:'';
            display: block;
            clear:both;
        }
        .item .thumb img{
            width:100px;
            height:100px;
        }
        .item .thumb{
            float:left;
        }
        .item h2{
            margin-left:120px;
            font-size:14px;
          
        }
        .item p{
            margin-left:120px;
            font-size:14px;
            margin-top:60px;
            color:#ccc;
        }
        .load-more{
             visibility: hidden;
             margin: 3px;
             height: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="news">
            <!--<li>
                <a>
                    <div>
                        <img src="" alt="">
                    </div>
                    <h2></h2>
                    <p></p>
                </a>
            </li>
          -->
        </ul>
        <p class="load-more">沒有更多了</p>
    </div>
    
    
    <script src="jquery-3.2.0.min.js"></script>

    <script>
        var pageIndex =0;//每次后端給一頁數(shù)據(jù) 一頁數(shù)據(jù)加載2個(gè)新聞
        var isOver = false;// 數(shù)據(jù)全部被加載完以后為true;
        var isNewsArrive = true ; //滾動(dòng)時(shí)數(shù)據(jù)是否到了 給個(gè)鎖
        
        getNews();
        $(window).on('scroll',checkNews);

        function checkNews(){
            if(isShow($('.load-more')) && !isOver && isNewsArrive){
                getNews();
            }
        }

        function getNews(){
            isNewsArrive = false;
            
            $.get('/getNews',{page:pageIndex}).done(function(ret){
                isNewsArrive = true //數(shù)據(jù)到了
                if(ret.status === 0){//與后端約定status===0時(shí)數(shù)據(jù)發(fā)送成功
                    pageIndex++;
                    appendHtml(ret.data)//ret.data獲取后端retNews
                    checkNews();//如果.load-more出現(xiàn)在可視區(qū)繼續(xù)獲取

                }else{
                    alert('獲取新聞出錯(cuò)')
                }
                
            }).fail(function(){
                alert('系統(tǒng)異常')
            })
        


    }
        
      

        function appendHtml(news){
            if(news.length === 0){
                isOver = true;
                
                $('.container').append('<p>沒有更多了</p>')
                return ;//數(shù)據(jù)全部加載完后
            }
            var  html ='';//接受到數(shù)據(jù)后拼接html
            $.each(news,function(){
                html +='<li class="item">';
                html +=' <a href="'+this.link+'">';
                html += '<div class="thumb">  ![]('+ this.img +')</div>';
                html +='<h2>'+this.title+'</h2>';
                html +=' <p>'+this.brif+'</P>';
                html +='</a></li>';

            })
            $('.news').append(html);

        }

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

//后端
app.get('/getNews',function(req,res){
     
    
    var news = [
        {
            link:'http://mil.qq.com/mil_index.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
            title:'韓媒：韓國旅行社停止銷售中國旅游產(chǎn)品 銷量銳減',
            brif:'薩德對(duì)韓國人民生活的影響-1'
        },
          {
            link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
            title:'陸克文：特朗普時(shí)期彬伦，臺(tái)灣問題不再是中美臺(tái)面上問題',
            brif:'薩德對(duì)韓國人民生活的影響-2'
        },
          {
            link:'http://news.qq.com/l/milite/milgn/list2010122872223.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290161671_150120/0',
            title:'樂天免稅店銷售額銳減25% 韓國免稅店開拓東南亞市場',
            brif:'薩德對(duì)韓國人民生活的影響-3'
        },
          {
            link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
            title:'朝中社：美國“反恐戰(zhàn)”是前所未聞的國家恐怖行為',
            brif:'薩德對(duì)韓國人民生活的影響-4'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
            title:'美前防長：對(duì)朝鮮動(dòng)武風(fēng)險(xiǎn)太大滔悉，還是談判吧',
            brif:'薩德對(duì)韓國人民生活的影響-5'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
            title:'央視揭秘遼寧艦首次遠(yuǎn)航 露臉的仨人啥來頭？',
            brif:'薩德對(duì)韓國人民生活的影響-6'
        },
          {
            link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
            title:'媒體：留給和平解決朝核問題的時(shí)間或許所剩無多',
            brif:'薩德對(duì)韓國人民生活的影響-7'
        },
         {
            link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
            title:'德女防長回懟特朗普欠軍費(fèi)言論：我們不欠北約的錢',
            brif:'薩德對(duì)韓國人民生活的影響-8'
        },
         {
            link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
            title:'俄媒：學(xué)生超越老師 中國造艦已遙遙領(lǐng)先俄羅斯',
            brif:'薩德對(duì)韓國人民生活的影響-9'
        },
         {
            link:'http://mil.qq.com/mil_index.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
            title:'韓媒：韓國旅行社停止銷售中國旅游產(chǎn)品 銷量銳減',
            brif:'薩德對(duì)韓國人民生活的影響-1'
        },
          {
            link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
            title:'陸克文：特朗普時(shí)期媚朦，臺(tái)灣問題不再是中美臺(tái)面上問題',
            brif:'薩德對(duì)韓國人民生活的影響-2'
        },
          {
            link:'http://news.qq.com/l/milite/milgn/list2010122872223.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290161671_150120/0',
            title:'樂天免稅店銷售額銳減25% 韓國免稅店開拓東南亞市場',
            brif:'薩德對(duì)韓國人民生活的影響-3'
        },
          {
            link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
            title:'朝中社：美國“反恐戰(zhàn)”是前所未聞的國家恐怖行為',
            brif:'薩德對(duì)韓國人民生活的影響-4'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
            title:'美前防長：對(duì)朝鮮動(dòng)武風(fēng)險(xiǎn)太大氧敢，還是談判吧',
            brif:'薩德對(duì)韓國人民生活的影響-5'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
            title:'央視揭秘遼寧艦首次遠(yuǎn)航 露臉的仨人啥來頭？',
            brif:'薩德對(duì)韓國人民生活的影響-6'
        },
          {
            link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
            title:'媒體：留給和平解決朝核問題的時(shí)間或許所剩無多',
            brif:'薩德對(duì)韓國人民生活的影響-7'
        },
         {
            link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
            title:'德女防長回懟特朗普欠軍費(fèi)言論：我們不欠北約的錢',
            brif:'薩德對(duì)韓國人民生活的影響-8'
        },
         {
            link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
            title:'俄媒：學(xué)生超越老師 中國造艦已遙遙領(lǐng)先俄羅斯',
            brif:'薩德對(duì)韓國人民生活的影響-9'
        },
         {
            link:'http://mil.qq.com/mil_index.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
            title:'韓媒：韓國旅行社停止銷售中國旅游產(chǎn)品 銷量銳減',
            brif:'薩德對(duì)韓國人民生活的影響-1'
        },
          {
            link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
            title:'陸克文：特朗普時(shí)期询张，臺(tái)灣問題不再是中美臺(tái)面上問題',
            brif:'薩德對(duì)韓國人民生活的影響-2'
        },
          {
            link:'http://news.qq.com/l/milite/milgn/list2010122872223.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290161671_150120/0',
            title:'樂天免稅店銷售額銳減25% 韓國免稅店開拓東南亞市場',
            brif:'薩德對(duì)韓國人民生活的影響-3'
        },
          {
            link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
            title:'朝中社：美國“反恐戰(zhàn)”是前所未聞的國家恐怖行為',
            brif:'薩德對(duì)韓國人民生活的影響-4'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
            title:'美前防長：對(duì)朝鮮動(dòng)武風(fēng)險(xiǎn)太大孙乖，還是談判吧',
            brif:'薩德對(duì)韓國人民生活的影響-5'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
            title:'央視揭秘遼寧艦首次遠(yuǎn)航 露臉的仨人啥來頭？',
            brif:'薩德對(duì)韓國人民生活的影響-6'
        },
          {
            link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
            title:'媒體：留給和平解決朝核問題的時(shí)間或許所剩無多',
            brif:'薩德對(duì)韓國人民生活的影響-7'
        },
         {
            link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
            title:'德女防長回懟特朗普欠軍費(fèi)言論：我們不欠北約的錢',
            brif:'薩德對(duì)韓國人民生活的影響-8'
        },
         {
            link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
            title:'俄媒：學(xué)生超越老師 中國造艦已遙遙領(lǐng)先俄羅斯',
            brif:'薩德對(duì)韓國人民生活的影響-9'
        },
         {
            link:'http://mil.qq.com/mil_index.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
            title:'韓媒：韓國旅行社停止銷售中國旅游產(chǎn)品 銷量銳減',
            brif:'薩德對(duì)韓國人民生活的影響-1'
        },
          {
            link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
            title:'陸克文：特朗普時(shí)期份氧，臺(tái)灣問題不再是中美臺(tái)面上問題',
            brif:'薩德對(duì)韓國人民生活的影響-2'
        },
          {
            link:'http://news.qq.com/l/milite/milgn/list2010122872223.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290161671_150120/0',
            title:'樂天免稅店銷售額銳減25% 韓國免稅店開拓東南亞市場',
            brif:'薩德對(duì)韓國人民生活的影響-3'
        },
          {
            link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
            title:'朝中社：美國“反恐戰(zhàn)”是前所未聞的國家恐怖行為',
            brif:'薩德對(duì)韓國人民生活的影響-4'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
            title:'美前防長：對(duì)朝鮮動(dòng)武風(fēng)險(xiǎn)太大唯袄，還是談判吧',
            brif:'薩德對(duì)韓國人民生活的影響-5'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
            title:'央視揭秘遼寧艦首次遠(yuǎn)航 露臉的仨人啥來頭？',
            brif:'薩德對(duì)韓國人民生活的影響-6'
        },
          {
            link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
            title:'媒體：留給和平解決朝核問題的時(shí)間或許所剩無多',
            brif:'薩德對(duì)韓國人民生活的影響-7'
        },
         {
            link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
            title:'德女防長回懟特朗普欠軍費(fèi)言論：我們不欠北約的錢',
            brif:'薩德對(duì)韓國人民生活的影響-8'
        },
         {
            link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
            title:'俄媒：學(xué)生超越老師 中國造艦已遙遙領(lǐng)先俄羅斯',
            brif:'薩德對(duì)韓國人民生活的影響-9'
        },
       
    
    ]
    var pageIndex = req.query.page;
    var len = 2;
    var retNews = news.slice(pageIndex*len,pageIndex*len+len)//獲取數(shù)據(jù)第一次0 2 /第二次 2  4 /....

    res.send({
        status:0,
        data:retNews
    })
})

20170325_193905.gif

版權(quán)歸饑人谷楠柒所有如有轉(zhuǎn)載請(qǐng)附上地址

最后編輯于：2017.12.06 05:36:07

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末蜗帜，一起剝皮案震驚了整個(gè)濱河市恋拷，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌厅缺，老刑警劉巖蔬顾，帶你破解...
沈念sama閱讀 216,324評(píng)論 6贊 498
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異湘捎，居然都是意外死亡诀豁，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,356評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門窥妇，熙熙樓的掌柜王于貴愁眉苦臉地迎上來舷胜，“玉大人，你說我怎么就攤上這事活翩∨牍牵” “怎么了？”我有些...
開封第一講書人閱讀 162,328評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵材泄，是天一觀的道長沮焕。經(jīng)常有香客問我，道長拉宗，這世上最難降的妖魔是什么遇汞？我笑而不...
開封第一講書人閱讀 58,147評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上空入，老公的妹妹穿的比我還像新娘络它。我一直安慰自己，他們只是感情好歪赢，可當(dāng)我...
茶點(diǎn)故事閱讀 67,160評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布化戳。她就那樣靜靜地躺著，像睡著了一般埋凯。火紅的嫁衣襯著肌膚如雪点楼。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,115評(píng)論 1贊 296
城市分裂傳說
那天白对，我揣著相機(jī)與錄音掠廓，去河邊找鬼。笑死甩恼，一個(gè)胖子當(dāng)著我的面吹牛蟀瞧，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播条摸，決...
沈念sama閱讀 40,025評(píng)論 3贊 417
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼悦污，長吁一口氣：“原來是場噩夢(mèng)啊……” “哼！你這毒婦竟也來了钉蒲？” 一聲冷哼從身側(cè)響起切端，我...
開封第一講書人閱讀 38,867評(píng)論 0贊 274
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎顷啼，沒想到半個(gè)月后踏枣，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,307評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡钙蒙，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,528評(píng)論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年椰于，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片仪搔。...
茶點(diǎn)故事閱讀 39,688評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖蜻牢，靈堂內(nèi)的尸體忽然破棺而出烤咧，到底是詐尸還是另有隱情，我是刑警寧澤抢呆，帶...
沈念sama閱讀 35,409評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布煮嫌，位于F島的核電站，受9級(jí)特大地震影響抱虐，放射性物質(zhì)發(fā)生泄漏昌阿。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,001評(píng)論 3贊 325
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望懦冰。院中可真熱鬧灶轰，春花似錦、人聲如沸刷钢。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,657評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽内地。三九已至伴澄，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間阱缓，已是汗流浹背非凌。一陣腳步聲響...
開封第一講書人閱讀 32,811評(píng)論 1贊 268
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留荆针，地道東北人敞嗡。一個(gè)月前我還...
沈念sama閱讀 47,685評(píng)論 2贊 368
代替公主和親
正文我出身青樓，卻偏偏與公主長得像祭犯，于是被迫代替她去往敵國和親秸妥。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,573評(píng)論 2贊 353

懶加載

1. 如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）日熬。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)

2.當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍友题。每次出現(xiàn)都在控制臺(tái)打印 true 郁季。用代碼實(shí)現(xiàn)

3. 當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍浴骂。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true乓土，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)

4. 圖片為什么懶加載，懶加載的原理是什么趣苏？

5.實(shí)現(xiàn)圖片的懶加載

6.懶加載新聞

推薦閱讀更多精彩內(nèi)容