懒加载

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

实现

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

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

function isVisible($node){
    var scrollTop = $(window).scrollTop()
    var windowHeight = $(window).height()
    var offsetTop = $node.offset().top
    if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
        return true
    }
    return false
 }
$(window).scroll(function(){
    if( isVisible($node) ){
     console.log(true)
    }
})

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

var isLoad = false;
function isVisible($node){
    var scrollTop = $(window).scrollTop()
    var windowHeight = $(window).height()
    var offsetTop = $node.offset().top
    if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
        return true
    }
    return false
 }
$(window).scroll(function(){
    if( isVisible($node)  &&  !idLoad  ){
        comsole.log(true)
        isLoad = true;
    }
})

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

• 懒加载的目的是当页面有过多的图片需要加载之时，如果一次性下载下来，需要很多的时间以及流量，这样会很大程度的影响用户体验，也会因为流量费用提升网站成本，所以根据设定一定的条件来让图片一步一步的慢慢的加载，会极大的提升用户体验一级节省自身流量费用。
• 懒加载的原理：当网页载入时，将图片的src地址先存储在一个自定义的属性当中，图片的位置用一张白图来占位置，当用户的视窗滚动到能看到图片位置的时候将自定义属性存储的src地址赋值到图片的src之中达到懒加载的目的。
• 关键点：如何判断用户的窗口已经移动到了能看到图片的位置，一般使用onscroll判断用户的窗口离顶端的距离来达到效果。

实现懒加载效果

• demo:
• 预览