懒加载

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

 function isVisible($node){
   var scrollTop = $(window).scrollTop();
   var viewPort = $(window).height();
   var nodeTop = $node.offset().top;
   
   if(scrollTop + viewPort >= nodeTop && scrollTop <= nodeTop + $node.outerHeight()){
     return true;
   }else{
     return false;
   }
 }

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

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


function isVisible($node){
   var scrollTop = $(window).scrollTop();
   var viewPort = $(window).height();
   var nodeTop = $node.offset().top;
   
   if(scrollTop + viewPort >= nodeTop && scrollTop <= nodeTop + $node.outerHeight()){
     return true;
   }else{
     return false;
   }
}

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

check();

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

    function check(){
        $node.not('.load').each(function(){
        if(isVisible($(this))){
            console.log(true);
            }
        });
    }


    function isVisible($node){
    var scrollTop = $(window).scrollTop();
    var viewPort = $(window).height();
    var nodeTop = $node.offset().top;
    
    if(scrollTop + viewPort >= nodeTop && scrollTop <= nodeTop + $node.outerHeight()){
        return true;
    }else{
        return false;
    }
    }

    function show($node){
        $node.each(function(){
            var imgUrl = $(this).attr('data-src');
            $(this).attr('src', imgUrl);
            $(this).addClass('load');
        });    
    }

题目4：图片懒加载的原理是什么？
先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

图片延迟加载主要是用来解决一个页面中图片太多，导致打开页面的时候一次性加载太多图片导致打开速度慢的问题。现在在很多网站上都用得很多，比如说微店，淘宝等一些图片量较大的网站，采取懒加载也是利于用户体验。

原理即是网页代码中有img标签，但是没有src属性，只是把src原本应该放的图片链接放到另外一个属性值去，比如说data-src，这样浏览器就不能把图片渲染出来。但是可以通过js获取这个图片链接，通过适时把获取到的图片链接赋值给src属性上，这样图片就能在适时的时候渲染出来，而不是一次性全部加载，而是通过鼠标滚动，一个一个加载进来。

题目5：实现视频中的图片懒加载效果
demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>lazy-loading</title>
  <style>
      .container{
          text-align: center;
          width: 900px;
          list-style: none;
          margin: 0 auto;
      }

      .container img{
          width: 400px;
          float: left;
          margin: 10px;
      }

      .container:after{
          content:'';
          display: block;
          clear: both;
      }
  </style>
</head>
<body>
    <ul class="container">
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="#">
                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" alt="">
            </a>
        </li>

    </ul>

    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

    <script>

    check();

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

    function check(){
        $('.container img').not('.load').each(function(){
        if(isVisible($(this))){
            show($(this));
            }
        });
    }


    function isVisible($node){
    var scrollTop = $(window).scrollTop();
    var viewPort = $(window).height();
    var nodeTop = $node.offset().top;

    if(scrollTop + viewPort >= nodeTop && scrollTop <= nodeTop + $node.outerHeight()){
        return true;
    }else{
        return false;
    }
    }

    function show($node){
        $node.each(function(){
            var imgUrl = $(this).attr('data-src');
            $(this).attr('src', imgUrl);
            $(this).addClass('load');
        });    
    }
    </script>
</body>
</html>

题目6：实现视频中的新闻懒加载效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
      html,body,h2,p,ul,li{
      margin: 0;
      padding: 0;
    }
    a{
      color: #888;
      text-decoration: none;
    }

    .container{
      max-width: 600px;
      margin: 0 auto;
    }
    .item{
      margin-top: 20px;
    }
    .item:after{
      content: '';
      display: block;
      clear: both;
    }
    .item .thumb img{
      width: 50px;
      height: 50px;
    }
    .item .thumb {
      float: left;
    }
    .item h2{
      margin-left: 60px;
      font-size: 14px;

    }
    .item p{
      margin-left: 60px;
      font-size: 14px;
      margin-top: 10px;
      color: #ccc;
    }
    .load-more{
      visibility: hidden;
      margin: 3px;
      height: 3px;
    }
  </style>
</head>
<body>
    <div class="container">
        <ul class="news">

        </ul>
        <p class="load-more"></p>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        var isNewsArrive = true,
            isOver = false,
            pageIndex = 0;
        
        getNews();

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

        function getNews(){
            isNewsArrive = false;

            $.get('/getNews', {page: pageIndex}).done(function(ret){
                isNewsArrive = true;

                if(ret.status === 0){
                pageIndex++;
                appendHtml(ret.data)
                checkNews()
                }else{
                alert('获取新闻出错')
                }
                
                }).fail(function(){
                    alert('系统异常')
            })
        }

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

        function appendHTML(news){
            if(news.legth === 0){
                isOver = true;
                $('.container').append('<p>没有更多数据了</p>');
            }

            var html = '';
            $.each('news', function(){
                html += '<li class="items">';
                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 isVisible($node){
        var scrollTop = $(window).scrollTop();
        var viewPort = $(window).height();
        var nodeTop = $node.offset().top;

        if(scrollTop + viewPort >= nodeTop && scrollTop <= nodeTop + $node.outerHeight()){
            return true;
        }else{
            return false;
            }
        }
    </script>
</body>
</html>

最后编辑于：2017.12.07 22:28:42

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

懒加载

推荐阅读更多精彩内容