我的前端学习笔记28——懒加载

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

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

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

    

  
    
    
    
  
  
    

      
hello
      
world
      
good
      
bye
    
    
    
  

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

  
    
    
    
  
  
    

      
hello
    
    
    
  

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

懒加载一共需要解决的只有两个问题：

• 如何定位图片位置，即触发绑定时间函数的开关

• 如何让图片加载出来

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

效果展示

6，实现视频中的新闻懒加载效果

  
    
    
    
  
  
    

      


      
    
    加载更多