懒加载

如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）写一个函数 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属性修改为实际的图片地址，可以避免网页同时加载大量图片出现卡顿情况。

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

<script>
//先判断,图片不会出现空白
lazyRender()
var clock
$(window).on("scroll",function(){
    //函数节流
    if (clock) {
        clearTimeout(clock)
    }
    clock = setTimeout(function(){
        lazyRender()
        console.log("hello")
    },300)  
})


function lazyRender(){
    $(".layout li>a>img").each(function(){
    // 判断是否已经出现在视野并且没有加载
    if (checkShow($(this)) && !isLoaded($(this))) {
        // 加载它
        loadImg($(this))
    }
})
}
// //滚动事件
// $(window).on("scroll",function(){
//  // 遍历img
//  $(".layout li>a>img").each(function(){
//      // 判断是否已经出现在视野并且没有加载
//      if (checkShow($(this)) && !isLoaded($(this))) {
//          // 加载它
//          loadImg($(this))
//      }
//  })
// })

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

//是否加载
function isLoaded($img){
    return $img.attr("data-src") === $img.attr("src")
}

function loadImg($img){
    $img.attr("src",$img.attr("data-src"))
}

</script>

• 预览地址