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

一、转载内容

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

二、clientHeight和offsetHeight

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

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

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

发现两者数值相同，因为body没有加border。当我给body加上10px的border，clientHeight就少了20px

二、元素滚动高度

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

1、element.scrollHeight 元素滚动内容的总长度

element.scrollHeight 元素滚动内容的总长度。如果元素没出现滚动条， scrollHeight等于 clientHeight

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

3、window.innerHeight 窗口的高度

三、图片懒加载

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

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

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

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

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

  
  
  
    
    
      

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
hello
    
    
    
    
    
    
    
    
      
      

执行结果