强硬进入岳A片69视频,甜性涩爱下载,免费观看欧美成人aa片爱我多深

題目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>

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

懶加載

懶加載

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

懶加載

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频