懒加载

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

function isVisible($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;
    }
}

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>元素每次出现都在控制台打印</title>
  <style>
    div:nth-child(2n+1) {
      background: pink;
      width: 500px;
      height: 500px;
    }
    div:nth-child(2n) {
      background: yellow;
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div>
    <div>1</div>
    <div>2</div>
    <div class="visible">我出现在可视窗口</div>
    <div>4</div>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    var $visible = $('.visible');
    $(window).on('scroll', function() {
      if(isVisible($visible)) {
        console.log('true');
      }
    })
    function isVisible($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>
</body>
</html>

预览

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>元素每次出现都在控制台打印</title>
  <style>
    div:nth-child(2n+1) {
      background: pink;
      width: 500px;
      height: 500px;
    }
    div:nth-child(2n) {
      background: yellow;
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div>
    <div>1</div>
    <div>2</div>
    <div class="visible">我出现在可视窗口</div>
    <div>4</div>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    var $visible = $('.visible');
    var flag = true;
    $(window).on('scroll', function() {
      if(flag) {
        isVisible($visible);
      }
    })

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

预览

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

当访问一个页面的时候，首先把img的src置为正在加载的图片地址，因为所有的这个背景图片都一样，所以只需加载一次。真正的所需加载的地址放到另外的属性上面。等到页面滚动到那一部分的时候，再把页面中的img标签的src属性发送请求并下载图片，通过动态改变img的src属性实现。减少网络请求。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简单的图片懒加载</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none;
    }
    .wrap{
      width: 960px;
      margin: 20px auto;
      background: rgb(24,20,37);
    }
    .inner{
      margin-left: -30px;
      padding-top: 30px;
    }
    .clearfix:after{
      content: '';
      display: block;
      clear: both;
    }
    .inner li{
      float: left;
      margin-left: 30px;
      text-align: center;
      margin-bottom: 30px;
    }
    img{
      width: 465px;
        height: 305px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <ul class="inner clearfix">
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
      <li><a href="#">![](http://upload-images.jianshu.io/upload_images/2244513-f99ff2db555e14d2.gif?imageMogr2/auto-orient/strip)</a></li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
  // 先调用一次，省得要鼠标滚动才加载
    check();
    $(window).on('scroll', check);
    if($('.inner img').not('.load')) {
      $('.wrap').append('<p>图片加载完啦~~~</p>');
      $('p').css('color', '#fff');
    }
    function check() {
      $('.inner img').not('.load').each(function() {
        if(isVisible($(this))) {
          showImage($(this));
        }
      })
    }

    function isVisible($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;
      }
    }

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

预览

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

newsGetMore.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新闻懒加载</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    a{
     color: #333;
     text-decoration: none;
   }
   li{
     list-style: none;
   }
   .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
   .wrap{
     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="wrap">
    <ul class="news">

    </ul>
    <p class="load-more"></p>
    <!-- 页面一开始没有滚动条，利用p出现发请求。 -->
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    var pageNumber = 0,
        isLoaded = true,
        isOver = false;
    getNews();
    $(window).on('scroll', checkNews);

    function getNews() {
      isLoaded = false;
      $.get('/getNews', {page: pageNumber}).done(function(res) {
        isLoaded = true;
        if(res.status == 0) {
          pageNumber++;
          appendHtml(res.filterNews);
          checkNews();
        }else{
          alert("获取新闻出错！");
        }
      }).fail(function() {
        alert("系统异常！");
      })
    }

    function appendHtml(news) {
      if(news.length == 0) {
        isOver = true;
        $('.wrap').append('<p>没有更多新闻啦~~~</p>')
      }
      var htmls = '';
      $.each(news, function(){
        console.log(this.img);
        htmls += '<li class="item clearfix">';
        htmls += '<a href="' + this.link + '">';
        htmls += '<div class="thumb"> ![](' + this.img + ')</div>';
        htmls += '<h2>'+this.title+'</h2>';
        htmls += '<p>'+this.brif+'</p>';
        htmls += '</a></li>';
      })
      console.log(htmls);
      $('.news').append(htmls);
      // $('.news').append(news.map(new => `
      //     <li class="item">
      //       <a href="${new.link}">
      //         ![](${new.img})</div>
      //         <h2>${new.title}</h2>
      //         <p>${new.brief}</p>
      //       </a>
      //     </li>
      // `).join(''))
    }

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

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

router.js

app.get('/getNews', function(req, res) {
    var news = [
        {
            link: 'http://view.inews.qq.com/a/20160830A02SEB00',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531730377_150120/0',
            title: '中国轰6K研发险些被俄罗斯发动机厂商卡脖子',
            brif:  '近日，轰6K＂战神＂轰炸机首次公开亮相。在中国...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '外媒称中国已经决心造出世界先进的航空发动机',
            brif: '资料图：2012年11月14日，第九届中国国际...'
        },
        {
            link: 'http://view.inews.qq.com/a/20160828A007LB00',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531727868_150120/0',
            title: '传奇导弹专家冯·布劳恩：其实到美国后曾被当局忽视',
            brif: '小火箭出品本文作者：邢强博士原文标题：布劳恩博...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830033420/MIL2016083003342001',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0',
            title: '中国空军演习加快反导能力建设 韩媒：或针对“萨德',
            brif: '中国空军演习加快反导能力建设 韩媒：或针对“萨德'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '外媒称中国已经决心造出世界先进的航空发动机',
            brif: '资料图：2012年11月14日，第九届中国国际...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '为了喝酒，应该海军当年那些水兵也是蛮拼的……',
            brif: '嚣张（aggressive）这个词，腐国海军当...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '西媒臆断老挝“弃华投美” 认为现政府更亲越南',
            brif: '西媒臆断老挝“弃华投美” 认为现政府更亲越南'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '中国武警2016年征兵宣传片震撼首发',
            brif: '中国武警2016年征兵宣传片震撼首发'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '韩国多次宣称“一旦开战三天内消灭朝鲜空军”，靠谱吗？',
            brif: '韩国多次宣称“一旦开战三天内消灭朝鲜空军”，靠谱吗？'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '韩促朝停止诋毁韩国元首 批其丧失最基本礼仪常识',
            brif: '韩促朝停止诋毁韩国元首 批其丧失最基本礼仪常识'
        },
        {
            link: 'http://xw.qq.com/mil/20160830033420/MIL2016083003342001',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531646423_150120/0',
            title: '中国空军演习加快反导能力建设 韩媒：或针对“萨德',
            brif: '中国空军演习加快反导能力建设 韩媒：或针对“萨德'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '外媒称中国已经决心造出世界先进的航空发动机',
            brif: '资料图：2012年11月14日，第九届中国国际...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '为了喝酒，应该海军当年那些水兵也是蛮拼的……',
            brif: '嚣张（aggressive）这个词，腐国海军当...'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '西媒臆断老挝“弃华投美” 认为现政府更亲越南',
            brif: '西媒臆断老挝“弃华投美” 认为现政府更亲越南'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '中国武警2016年征兵宣传片震撼首发',
            brif: '中国武警2016年征兵宣传片震撼首发'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '韩国多次宣称“一旦开战三天内消灭朝鲜空军”，靠谱吗？',
            brif: '韩国多次宣称“一旦开战三天内消灭朝鲜空军”，靠谱吗？'
        },
        {
            link: 'http://xw.qq.com/mil/20160830028700/MIL2016083002870002',
            img: 'http://inews.gtimg.com/newsapp_ls/0/531644649_150120/0',
            title: '韩促朝停止诋毁韩国元首 批其丧失最基本礼仪常识',
            brif: '韩促朝停止诋毁韩国元首 批其丧失最基本礼仪常识'
        }
    ];
    var page = req.query.page;
    var len = 3;
    var filterNews = news.slice(page*len, page*len+len);
    res.send({
        status: 0,
        filterNews
    });
});

Paste_Image.png

最后编辑于：2017.12.05 18:50:07

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

懒加载