jquery懒加载、回到顶部

Q&A:

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task29</title>
  </head>
  <body>
    <p style="height: 100px">内容1</p>
    <p style="height: 100px">内容1</p>
    <p style="height: 100px">内容1</p>
    <p style="height: 100px">内容1</p>
    <p style="height: 100px">内容1</p>
    <p style="height: 100px">内容1</p>
    <p style="height: 100px">内容1</p>
    <p style="height: 100px">内容1</p>
    <div class="test">hello</div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $.fn.isVisible = function() {
        var $cur = $(this),
            offsetTop = $cur.offset().top,
            $winH = $(window).height(),
            scrollTop = $(window).scrollTop(),
            scrollBottom = $(window).scrollTop() + $winH;
        if(offsetTop > scrollTop && scrollBottom > offsetTop) {
          console.log(true);
          return true;
        } else {
          console.log(false);
          return false;
        }
      }
      $('.test').isVisible();
    </script>
  </body>
</html>
isVisible

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task29</title>
    <style type="text/css">
      html, body, div {
        margin: 0;
        padding: 0;
      }
      .test {
        margin: 30px auto;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        border: 3px solid;
        background-color: rgba(180, 255, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="test test1">test1</div>
    <div class="test test2">test2</div>
    <div class="test test3">test3</div>
    <div class="test test4">test4</div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $.fn.isVisible = function() {
        var $self = $(this);
        $(window).on('scroll', function() {
          var $me = $(this);
              offsetTop = $self.offset().top,
              $winH = $me.height(),
              scrollTop = $me.scrollTop(),
              scrollBottom = $me.scrollTop() + $winH;
          if(offsetTop > scrollTop && scrollBottom > offsetTop) {
            console.log(true);
          } else {
            console.log(false);
          }
        });
      }
      $('.test4').each(function() {
        $(this).isVisible();
      });
    </script>
  </body>
</html>

效果预览

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task29-demo3</title>
    <style type="text/css">
      html, body, div {
        margin: 0;
        padding: 0;
      }
      .test {
        margin: 30px auto;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        border: 3px solid;
        background-color: rgba(180, 255, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="test test1">test1</div>
    <div class="test test2">test2</div>
    <div class="test test3">test3</div>
    <div class="test test4">test4</div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $.fn.isVisible = function() {
        var $self = $(this);
        $(window).on('scroll', function() {
          var $me = $(this);
              offsetTop = $self.offset().top,
              $winH = $me.height(),
              scrollTop = $me.scrollTop(),
              scrollBottom = $me.scrollTop() + $winH;
          if(!$self.data('data-visible')) {
            if(offsetTop > scrollTop && scrollBottom > offsetTop) {
                console.log(true);
                $self.data('data-visible', true);
            } else {
              return;
            }
          }
        });
      }
      $('.test4').each(function() {
        $(this).isVisible();
      });
    </script>
  </body>
</html>

效果预览

4. 图片懒加载的原理是什么?

图片懒加载也称为曝光加载,将页面上的图片分批加载,只有当图片出现在window窗口中(用户可见)的时候,才加载图片;而正常情况下,img元素是自动加载的,所以可以自定义一个图片地址属性,当需要加载图片的时候,将该自定义属性值赋给src属性,以实现优化页面的渲染速度,图片延迟加载。


coding:


本文归饥人谷和本人所有,如需转载请注明来源,谢谢

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisi...
    鸿鹄飞天阅读 236评论 0 1
  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    coolheadedY阅读 415评论 0 0
  • 一、如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible...
    咩咩咩1024阅读 286评论 0 0
  • 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现...
    Nicklzy阅读 578评论 0 50
  • 问答 1. 如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVis...
    小木子2016阅读 210评论 0 0