进阶任务十六-懒加载

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

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

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

    
        
    
    
      
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
0
        
        
     

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

    
        
    
    
      
        

            
1
            
2
            
3
            
4
            
5
            
6
            
7
            
8
            
9
            
0
        
        
     

图片懒加载原理

• 首先将图片的地址存放在自定义的attribute中
• 在鼠标滚动过程中，判断相应img标签是否在可视窗口范围内，如果是的话将存放在自定义attribute中的图片地址赋值给src
• 优化：一开始就判断img标签是否在可视窗口范围内；使用setTimeout()提高代码性能

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

https://github.com/jirengu-inc/jrg-renwu11/blob/master/homework/%E5%BC%A0%E6%99%93%E8%BE%B0/Lazy/index.html