jQuery实例

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

实现

function isVisible($node){
        var scrollTop = $(window).scrollTop()//滚动条卷曲的高度
        var windowHeight = $(window).height()//可视内容的高度
        var offsetTop = $node.offset().top//node的偏移高度

        if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
                return true
            }
        return false
 }

原理：由此图片可知：

• 图片进入可视区域的条件：即是图片偏移的高度大于滚动条卷曲的高度；
• 图片即将离开可视区域但还在可视区域的条件：即是图片偏移的高度大于滚动条卷曲的高度+ 可视区的高度

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

$(function() {
    $(window).scroll(function(){
        if(isVisible($node)){
            console.log(true);
        }
  });
})

function isVisible($node){
        var scrollTop = $(window).scrollTop()//滚动条卷曲的高度
        var windowHeight = $(window).height()//可视内容的高度
        var offsetTop = $node.offset().top//node的偏移高度

        if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
                return true
            }
        return false
 }

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

var flag = false
$(function() {
    $(window).scroll(function(){
        if(isVisible($node) $$ !flag){
            console.log(true);
            flag = true
        }
  });
})

function isVisible($node){
        var scrollTop = $(window).scrollTop()//滚动条卷曲的高度
        var windowHeight = $(window).height()//可视内容的高度
        var offsetTop = $node.offset().top//node的偏移高度
        //忽略了图片的高度
        if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
                return true
            }
        return false
 }

题目4：图片懒加载的原理是什么？

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。

懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，把真正的路径存在元素的自定义属性“data-src”里，要用的时候就取出来，再设置

实现流程：当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内且是否已经加载过 -> 在，则动态将data-src的值赋予该图片的src且加载过便不在加载。

题目5：实现视频中的图片懒加载效果

demo

题目6(选做)：实现如下 新闻自动懒加载效果 （这里是参考代码， 其中html里的为前端代码， js 里的内容为 router.js里的后端代码， 也可参考往前班级视频)

新闻自动懒加载效果
ps:需使用mock

研究了一下函数节流与函数防抖

原生js实现懒加载效果