懒加载

1. 懒加载是网站解决性能问题最常见的方法
2. 熟练 server-mock 工具的使用

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

function isVisible($node){
    var scrollTop = $(window).scrollTop();  // 滑动高度
    var windowHeight = $(window).height();  // 可视高度
    var elementHeight = $node.offset().top   // 元素位置高度
    if((elementHeight < scrollTop + windowHeight) && (elementHeight > scrollTop)){
        return true;
    }
    return false;
}

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

$(window).on('scroll', function(){   // 绑定一个滑动事件
    var $node = document.getElementById('node');   // 节点位置
    if(isVisible($node)){     // 每次出现都在控制台打印true;
        console.log('true');
    } 
});

// 判断是否出现在窗口可视范围的函数
function isVisible($node){
    var scrollTop = $(window).scrollTop();  // 滑动高度
    var windowHeight = $(window).height();  // 可视高度
    var elementHeight = $node.offset().top   // 元素位置高度
    if((elementHeight < scrollTop + windowHeight) && (elementHeight > scrollTop)){
        return true;
    }
    return false;
}

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

$(window).on('scroll', function(){   // 绑定一个滑动事件
    var $node = document.getElementById('node');   // 节点位置
    var switch = true; // 第一次出现的开关
    if(isVisible($node)){
        if( switch ){   // 判断是否第一次
            console.log('true');
            switch = false;  // 关闭第一次
        }
    }    
});

// 判断是否出现在窗口可视范围的函数
function isVisible($node){
    var scrollTop = $(window).scrollTop();  // 滑动高度
    var windowHeight = $(window).height();  // 可视高度
    var elementHeight = $node.offset().top   // 元素位置高度
    if((elementHeight < scrollTop + windowHeight) && (elementHeight > scrollTop)){
        return true;
        console.log('true');
    }
    return false;
}

题目4： 图片懒加载的原理是什么？

• 什么时图片懒加载？

  • 当访问一个页面的时候，先把 img 元素或者其他元素的背景图片路径替换成一张1*1px的白色图片路径（这样的话就只需要请求一次），只有当页面出现在浏览起的可视范围以内时，才设置图片真正的路径，让图片显示出来。这就时懒加载。

• 为什么要使用这个技术？

  • 比如购物网站图片特别多，如果一访问页面就发这么多请求，页面加载会很慢，更有可能服务器吃不消。
  • 优点：减轻服务器压力，可以让页面加载更快的呈现在用户面前(用户体验比较好)。

• 如何实现？

  • 先把img元素的路径设置为一张1*1px（白色）图片路径，把真实路径地址放置在自定义属性 data-src 中。
  • 当页面滑动的时候检查所有的img元素，看看是否在可视窗口以内，如果在视野内在看看是否加载过，没有的加载的话就加载图片

可视窗口以内：要知道 滑动高度（垂直滚动条滚动的距离）/窗口高度（可视区高度）/元素位置高度（元素离文档顶部的高度）
- 滑动高度：
    - 原生JS: window.pagaYOffset
    - jQuery: $(window).scrollTop()
- 窗口高度:
    - 原生JS: window.innerHeight
    - jQuery: $(window).height();
- 元素位置高度:
    - 原生JS: element.scrollHeight
    - jQuery: $(this).offset().top

题目5： 实现视频中的图片懒加载效果

code