元素滚动高度和图片懒加载

时间 2019-12-09

标签元素滚动高度图片加载繁體版

原文原文链接

1、转载内容

首先转载两篇文章
JS中height、clientHeight、scrollHeight、offsetHeight区别
 关于scrollTop,offsetTop,scrollLeft,offsetLeft用法介绍html

2、clientHeight和offsetHeightnode

页面body的clientWidth和height是不加border的值，要包括padding的值
jquery

页面body的offsetWidth和height是加border的值，要包括padding的值
服务器

举个例子
在页面控制台输入document.body.clientHeight 和document.body.offsetHeight 函数

发现二者数值相同，由于body没有加border。当我给body加上10px的border，clientHeight就少了20px
post

2、元素滚动高度

当一个元素的内容多，高度超出他所在的容器高度，会出现滚动条性能

一、element.scrollHeight 元素滚动内容的总长度学习

element.scrollHeight 元素滚动内容的总长度。若是元素没出现滚动条， scrollHeight等于 clientHeightthis

二、element.scrollTop 滚动的高度
元素滚动的距离spa

三、window.innerHeight 窗口的高度

3、图片懒加载

我只想写一点笔记，方便本身记忆，这篇文章干货较少。若是想学习懒加载的朋友，建议直接观看这篇文章实现图片懒加载(Lazyload)，这篇文章写得很好，

懒加载主要是使用于图片比较多的状况，一次性加载全部的图片会给服务器比较大的压力，加载比较慢，因此咱们先不加载未出如今页面可视区域内的图片，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提高，也提升了用户体验。

懒加载主要有3个步骤：
一、把全部图片的src值换成另一张图片的src值，把真正的src值放在data-src内
二、判断元素是否从下方出如今可区域，$(node).offset().top<=$(window).height() + $(window).scrollTop()

滚动时offset的值，offset().top为元素距离页面内容的高度

三、把图片data-src换成src值

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    .container:after{
      content: '';
      display: block;
      clear: both;
    }
    .container img {
      float: left;
      width: 50%;
    }
    h1{
      clear: both;
    } 
    /* 由于img都是浮动，若是不清除浮动，h1的值高度就至关于container里面最高的，不是实际的数值 */
      </style>
    </head>
    <body>
      <div class="container">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">
    <h1 id="target">hello</h1>
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="19" data-src="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="20" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg">
    
    
      </div>
      <script>
    start()
    /* 一开始没有滚动，也须要触发一次 */
    $(window).on('scroll', function(){
      start()
    })

    function start(){
      $('.container img').not('[data-isLoaded]').each(function(){
        var $node = $(this)
        if( isShow($node) ){
          loadImg($node)
         /* setTimeout(loadImg($node),300)能够不作函数节流，懒加载原本就是为了提升响应速度的 */
        }
      })
    }


    function isShow($node){
      return $node.offset().top <= $(window).height() + $(window).scrollTop()
    }

    function loadImg($img){
      $img.attr('src', $img.attr('data-src'))
      $img.attr('data-isLoaded', 1)
      /*用于区别图片是否被加载过，防止从新加载*/
    }

  </script>
</body>
</html>

执行结果