懒加载

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 && scrollTop<offsetTop+nodeHeight){
     return true;
   }else{
     return false;
   } 
                 //scrollTop< offsetTop+nodeHeight浏览器上边缘
                 //windowHeight+scrollTop>offsetTop浏览器下边缘
}

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

<!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. 当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现

<p class="p1">hello</P>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        var lock = false//设置一个锁
        $(window).on('scroll',function(){
           if(!lock){//在滚动时不会在执行下面函数
               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;//当第一出现在可是区时把锁设置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. 图片为什么懒加载,懒加载的原理是什么?

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

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

5.实现图片的懒加载

  <script>
        check(); //打开网页把在可视区的img展示出来
        $(window).on('scroll', check)

        function  check(){
            $('.container img').not('.load').each(function(){//遍历没有.load的img
                if(isShow($(this))){//如果在可视区
                    show($(this))//执行函数
                }
            })
        } 



        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){//可视区域
                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;//每次后端给一页数据 一页数据加载2个新闻
        var isOver = false;// 数据全部被加载完以后为true;
        var isNewsArrive = true ; //滚动时数据是否到了 给个锁
        
        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 //数据到了
                if(ret.status === 0){//与后端约定status===0时数据发送成功
                    pageIndex++;
                    appendHtml(ret.data)//ret.data获取后端retNews
                    checkNews();//如果.load-more出现在可视区继续获取

                }else{
                    alert('获取新闻出错')
                }
                
            }).fail(function(){
                alert('系统异常')
            })
        


    }
        
      

        function appendHtml(news){
            if(news.length === 0){
                isOver = true;
                
                $('.container').append('<p>没有更多了</p>')
                return ;//数据全部加载完后
            }
            var  html ='';//接受到数据后拼接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:'韩媒:韩国旅行社停止销售中国旅游产品 销量锐减',
            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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容

  • 1、懒加载 1.什么是懒加载? 懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路...
    xiaolizhenzhen阅读 70,470评论 18 160
  • 1、懒加载1.什么是懒加载?懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替...
    Gaochengxin阅读 375评论 1 2
  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    _Dot912阅读 1,671评论 10 8
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,748评论 1 92
  • 什么是懒加载 对于用户暂时不需要的数据,不在页面打开的时候就去发送请求,设置一个条件,当用户触发条件的时候再去加载...
    刘圣凯阅读 237评论 0 0