懒加载

题目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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 懒加载和预加载
    1、懒加载 1.什么是懒加载？ 懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路...
    xiaolizhenzhen阅读 70,518评论 18赞 160
  • 懒加载
    1、懒加载1.什么是懒加载？懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替...
    Gaochengxin阅读 381评论 1赞 2
  • 元素可视范围&懒加载
    如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现...
    _Dot912阅读 1,712评论 10赞 8
  • 懒加载
    题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisib...
    yuhuan121阅读 369评论 0赞 0
  • 花五秒买一套房是种怎样的体验？
    2017年8月15日下午17点8分，我看到了自己的认购确认单，89.3平，总价2426817元。 这一刻，我心里五...
    无刺榴莲阅读 2,531评论 38赞 45