懒加载基础

1、如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。

先理解两个概念

• 元素顶部“露出”页面的时机是：元素距顶部高度 = 窗口滚动高度+窗口高度
• 元素尾部“消失”页面的时机是：元素距顶部高度+元素高度 = 窗口滚动高度

然后掌握获取这些高度的方法

• 获取元素高度：

（1）element.style.height：高度写在内联样式上（不推荐），单位：px

<div id="div1" style="height:150px"></div>
console.log(div1.style.height)
//"150px"

（2）getComputedStyle(element).height：计算后的样式（推荐），单位：px

#div1 {
  width: 100px;
  height: 150px;
  background: green;
  margin-top: 1000px;
}
<div id="div1"></div>
console.log(getComputedStyle(div1).height)
//"150px"

（3）$(selector).css(propertyName)：单位px或$(selector).propertyName()：单位，数值

注意后者只局限于读写宽高等

#div1 {
  width: 100px;
  height: 150px;
  background: green;
  margin-top: 1000px;
}
<div id="div1"></div>
console.log($('#div1').height())
//150px
console.log($('#div1').css('height'))
//"150px"

• 获取元素距顶部高度：分别有原生JS和JQuery方法，注意单位

这里要引入一个概念，offsetParent：

offsetParent并不是元素的父元素，而是已经定位的父元素（设置position）。
大多数情况下，元素都没有offsetParent，所以offsetTop等值都是相对与窗口的。
一旦元素有了offsetParent，便是相对于offsetParent，并且可以有多个。测试中，元素会忽略offsetParent的边框宽度，造成误差。

（1）大多数情况元素没有offsetParent，我们直接获取元素距顶部高度：

#div1 {
  width: 100px;
  height: 150px;
  background: green;
  margin-top: 1000px;
}
<div id="div1"></div>
console.log($('#div1').offset().top)
//1000
console.log(div1.offsetTop)
//1000

（2）如果考虑offsetParent，我们可以这样：

#div1 {
  border: 1px solid;
  width: 100px;
  height: 150px;
  background: green;
}
#ct {
  top:100px;
  position: absolute;
  border: 100px solid;
  padding: 100px;
}
  <div id="ct">
    <div id="div1"></div>
  </div>

function getOffsetTop( elem ){
  var offsetTop = -parseInt(getComputedStyle(elem).borderTopWidth)
  do {
    offsetTop += elem.offsetTop
    +parseInt(getComputedStyle(elem).borderTopWidth)
     
  } while( elem = elem.offsetParent )
   console.log(offsetTop)
}
getOffsetTop(div1)
//输出300，边框也计算在内了

• 获取窗口滚动高度：原生JS、JQuery都可以

console.log(document.body.scrollTop)
//359
console.log($('body').scrollTop())
//359
console.log($(window).scrollTop())
//359

• 获取窗口的高度比较简单：

console.log(window.innerHeight)
//601
console.log($(window).innerHeight())
//601

知道了上边这些，判断元素是否出现在窗口可视范围就简单了。

function isVisible($node){
  if($node.offset().top<window.innerHeight+$('body').scrollTop()
  &&$node.offset().top+$node.height()>$('body').scrollTop()){
    console.log($node+'在可视区域')
  }else{
     console.log($node+'不在可视区域')
  }
}

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

function isVisible($node){
  if($node.offset().top<window.innerHeight+$('body').scrollTop()
   &&$node.offset().top+$node.height()>$('body').scrollTop()){
    console.log(true)
  }
}
$(window).scroll(function(){
  isVisible($('#div1'))
})

预览地址：http://js.jirengu.com/finef/8/edit

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

思路：当第一次满足可视条件时给元素做一个标记，并输出true；以后每次滚动作出判断，消失时取消这个标记，已经有标记就什么也不做。

var state = false
function isVisible($node){
  if($node.offset().top<window.innerHeight+$('body').scrollTop()
   &&$node.offset().top+$node.height()>$('body').scrollTop()){
    if(state === false){
      console.log(true)
      state = true
    }
  }else{
    state = false
  }
}
$(window).scroll(function(){
  isVisible($('#div1'))
})

预览地址：http://js.jirengu.com/vijub/3/edit

4、 图片懒加载的原理是什么？

• 原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
• 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。

5、实现图片懒加载效果

预览地址：http://js.jirengu.com/raqof/7