懒加载

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

function isVisible($node){
    var windowHeight = $(window).height();
    var scrollHeight = $(window).scrollTop();
    var offsetHeight = $node.offset().top;
    if(offsetHeight > scrollHeight && offsetHeight < windowHeight + scrollHeight){
        return true
    }else{
        return false
    }
 }

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

function isVisible($node){
    var windowHeight = $(window).height();
    var scrollHeight = $(window).scrollTop();
    var offsetHeight = $node.offset().top;
    if(offsetHeight > scrollHeight && offsetHeight < windowHeight + scrollHeight){
        console.log('true')
    }
}
 

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

//判断是否加载过，node元素有个data-src的自定义属性，加载后会将src属性的值与之同步
    function isLoaded($node) {
      if($node.attr('src')===$node.attr('data-src')) {
        return true;
      }
      return false;
    }
//第一次出现时打印true
    function printVirginSymbol($node) {
      if (!isLoaded($node) && isVisible($node)) {//isVisible()为第一题中函数
        console.log(true); 
      }
    }

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

懒加载的实现原理是页面刷新的时候只请求在视图范围内的图片的资源，对于其他的图片等进入视图内之后再进行加载，这样做会减少http请求，提升页面的性能。
我们将图片src放入一个自定义属性中，判断一个元素是否出现在可视窗口中，当元素出现在可视窗口中再将这个自定义属性的值赋给图片的src。

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

http://js.jirengu.com/vobukunawa/2/edit