懒加载

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

function isVisible($node){
    var windowHeight = $(window).height(),//浏览器窗口可视区域的高度
          scrollTop = $(window).scrollTop(),//窗口滚动的顶部偏移量,即此时页面的上边界到可视区域的上边界的偏移量,简单的可以理解成整个页面滚动了多少距离
          offsetTop = $node.offset().top,//元素的绝对偏移量,指元素的实际尺寸(即不包括外边框margin)的上边界到页面顶端的距离.这个值不随窗口滚动而改变
          nodeHeight = $node.outerHeight();//元素的实际尺寸,即 height+padding+border,
                                           // $('#dom').outerHeight(true)#dom的实际尺寸及外边距,即 height+padding+border+margin
if(windowHeigth+scrollTop>offsetTop && scrollTopoffsetTop浏览器下边缘
}

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

    
    
    
    
    


    
hello
    
    

20170325_150941.gif

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

hello
    
    
    

20170325_163904.gif

4. 图片为什么懒加载，懒加载的原理是什么？

• 为什么懒加载：如果页面的图片过多，打开时页面时会同时发很多请求去加载图片，会阻塞页面的加载速度。

• 原理：把图片的src放在自定义的属性上data-src，当滚动页面时把可视区的图片自定义属性值换成src属性值。

5.实现图片的懒加载

20170325_171127.gif

6.懒加载新闻

    


    

        

            
        
        
没有更多了
    
    
    
    

    

//后端
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:'韩媒：韩国旅行社停止销售中国旅游产品 销量锐减',
            brif:'萨德对韩国人民生活的影响-1'
        },
          {
            link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
            title:'陆克文：特朗普时期，台湾问题不再是中美台面上问题',
            brif:'萨德对韩国人民生活的影响-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:'萨德对韩国人民生活的影响-3'
        },
          {
            link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
            title:'朝中社：美国“反恐战”是前所未闻的国家恐怖行为',
            brif:'萨德对韩国人民生活的影响-4'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
            title:'美前防长：对朝鲜动武风险太大，还是谈判吧',
            brif:'萨德对韩国人民生活的影响-5'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
            title:'央视揭秘辽宁舰首次远航 露脸的仨人啥来头？',
            brif:'萨德对韩国人民生活的影响-6'
        },
          {
            link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
            title:'媒体：留给和平解决朝核问题的时间或许所剩无多',
            brif:'萨德对韩国人民生活的影响-7'
        },
         {
            link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
            title:'德女防长回怼特朗普欠军费言论：我们不欠北约的钱',
            brif:'萨德对韩国人民生活的影响-8'
        },
         {
            link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
            title:'俄媒：学生超越老师 中国造舰已遥遥领先俄罗斯',
            brif:'萨德对韩国人民生活的影响-9'
        },
         {
            link:'http://mil.qq.com/mil_index.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
            title:'韩媒：韩国旅行社停止销售中国旅游产品 销量锐减',
            brif:'萨德对韩国人民生活的影响-1'
        },
          {
            link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
            title:'陆克文：特朗普时期，台湾问题不再是中美台面上问题',
            brif:'萨德对韩国人民生活的影响-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:'萨德对韩国人民生活的影响-3'
        },
          {
            link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
            title:'朝中社：美国“反恐战”是前所未闻的国家恐怖行为',
            brif:'萨德对韩国人民生活的影响-4'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
            title:'美前防长：对朝鲜动武风险太大，还是谈判吧',
            brif:'萨德对韩国人民生活的影响-5'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
            title:'央视揭秘辽宁舰首次远航 露脸的仨人啥来头？',
            brif:'萨德对韩国人民生活的影响-6'
        },
          {
            link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
            title:'媒体：留给和平解决朝核问题的时间或许所剩无多',
            brif:'萨德对韩国人民生活的影响-7'
        },
         {
            link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
            title:'德女防长回怼特朗普欠军费言论：我们不欠北约的钱',
            brif:'萨德对韩国人民生活的影响-8'
        },
         {
            link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
            title:'俄媒：学生超越老师 中国造舰已遥遥领先俄罗斯',
            brif:'萨德对韩国人民生活的影响-9'
        },
         {
            link:'http://mil.qq.com/mil_index.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
            title:'韩媒：韩国旅行社停止销售中国旅游产品 销量锐减',
            brif:'萨德对韩国人民生活的影响-1'
        },
          {
            link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
            title:'陆克文：特朗普时期，台湾问题不再是中美台面上问题',
            brif:'萨德对韩国人民生活的影响-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:'萨德对韩国人民生活的影响-3'
        },
          {
            link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
            title:'朝中社：美国“反恐战”是前所未闻的国家恐怖行为',
            brif:'萨德对韩国人民生活的影响-4'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
            title:'美前防长：对朝鲜动武风险太大，还是谈判吧',
            brif:'萨德对韩国人民生活的影响-5'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
            title:'央视揭秘辽宁舰首次远航 露脸的仨人啥来头？',
            brif:'萨德对韩国人民生活的影响-6'
        },
          {
            link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
            title:'媒体：留给和平解决朝核问题的时间或许所剩无多',
            brif:'萨德对韩国人民生活的影响-7'
        },
         {
            link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
            title:'德女防长回怼特朗普欠军费言论：我们不欠北约的钱',
            brif:'萨德对韩国人民生活的影响-8'
        },
         {
            link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
            title:'俄媒：学生超越老师 中国造舰已遥遥领先俄罗斯',
            brif:'萨德对韩国人民生活的影响-9'
        },
         {
            link:'http://mil.qq.com/mil_index.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
            title:'韩媒：韩国旅行社停止销售中国旅游产品 销量锐减',
            brif:'萨德对韩国人民生活的影响-1'
        },
          {
            link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
            title:'陆克文：特朗普时期，台湾问题不再是中美台面上问题',
            brif:'萨德对韩国人民生活的影响-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:'萨德对韩国人民生活的影响-3'
        },
          {
            link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
            title:'朝中社：美国“反恐战”是前所未闻的国家恐怖行为',
            brif:'萨德对韩国人民生活的影响-4'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
            title:'美前防长：对朝鲜动武风险太大，还是谈判吧',
            brif:'萨德对韩国人民生活的影响-5'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
            title:'央视揭秘辽宁舰首次远航 露脸的仨人啥来头？',
            brif:'萨德对韩国人民生活的影响-6'
        },
          {
            link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
            title:'媒体：留给和平解决朝核问题的时间或许所剩无多',
            brif:'萨德对韩国人民生活的影响-7'
        },
         {
            link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
            title:'德女防长回怼特朗普欠军费言论：我们不欠北约的钱',
            brif:'萨德对韩国人民生活的影响-8'
        },
         {
            link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
            title:'俄媒：学生超越老师 中国造舰已遥遥领先俄罗斯',
            brif:'萨德对韩国人民生活的影响-9'
        },
       
    
    ]
    var pageIndex = req.query.page;
    var len = 2;
    var retNews = news.slice(pageIndex*len,pageIndex*len+len)//获取数据第一次0 2 /第二次 2  4 /....

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

20170325_193905.gif

版权归饥人谷 楠柒 所有 如有转载请附上地址