问答

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

function isVisible($ele){
    var winH=$(window).height(),
    scrollTop=$(window).scrollTop(),
    offsetTop=$ele.offset().top,
    $eleH=$ele.innerHeight();
     if((winH+scrollTop>offsetTop)&&(scrollTop<offsetTop+$eleH)){
        return true;
    }else{
        return false;
     }
}

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

//直接调用上面的isVisible()函数
$(window).on("scroll",function(){
    if(isVisible($(".mid"))){
        console.log(true);
    }
})

demo

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

var isShow=false;
$(window).on("scroll",function(){
    if(isShow){
        return;
    }
    if(isVisible($(".mid"))){
        isShow=true;
        console.log(true);
    }
})

demo

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

页面中所有的图片的src中存放的都是同一张图片（例如一张白图），这张白图只需要加载一次，图片真正的地址存储在自定义属性data-src里面。然后判断某个元素是否出现在窗口的可视区域，如果出现在可视区域，则修改元素的src属性，使其变成图片真正的地址，从而让图片显示出来。
使用懒加载的方式，可避免出现一次性向服务器发送大量请求，导致服务器无法及时响应、用户等待过长时间、页面崩溃等问题的发生。

代码题

1.回到顶部效果
2.图片懒加载效果
3.无限滚动效果本地xampp测试通过