懒加载

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

页面的高度

元素距离顶部的垂直距离

滚轮滚动的距离

• 窗口高度 + 垂直滚动距离 = 元素垂直方向距离(元素处于窗口高度外)

  1. 窗口高度 + 垂直滚动距离 > 元素垂直方向距离 元素开始出现
  2. 垂直滚动距离 > 元素垂直方向距离 元素开始消失
  3. 垂直滚动距离 > 元素垂直方向距离 + 元素自身高度 元素消失完毕

• 滚轮向下滚动的距离 == 元素上升的距离

function isVisible($node){
    // 滚动的高度
    var scrollTop = $(window).scrollTop()
    //视窗的高度
    var windowHeight = $(window).height()
    // 图片距离顶部的垂直距离
    var offsetTop = $node.offset().top
    //如果元素距顶部的距离 小于 滚动距离+Window高度   并且 高度小于滚动
    if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
        //出现在视野里
        return true
    }
    return false
 }

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

//上面代码
$(window).on('scroll',function result(){
        if( isVisible($node) ){
            console.log(true);
        }
})

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

//第一个代码配合
var hadshow = false;
$(window).on('scroll',function(e){
  var $ct = $('.show');
  if(!hadshow && isVisiblie($ct) ){  
  console.log(true);
   hadshow = true;
  }
})

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

图片还没进入可视范围内之前，img标签的src属性为空，进入可视范围之后再把src属性修改为实际的图片地址，可以避免网页同时加载大量图片出现卡顿情况。

实现视频中的图片懒加载效果

• 预览地址