jquery懒加载、回到顶部

1.知识点部分：

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

图片懒加载也称为曝光加载，将页面上的图片分批加载，只有当图片出现在window窗口中（用户可见）的时候，才加载图片；而正常情况下，img元素是自动加载的，所以可以自定义一个图片地址属性，当需要加载图片的时候，将该自定义属性值赋给src属性，以实现优化页面的渲染速度，图片延迟加载。

懒加载图片的等式

窗口高度 + 下移窗口的距离 = 标记点到达窗口顶部的距离

jquery中this的指向（15:24~18:45）

• demo：

        var GoTop = {
            init: function () {
                var $goTop = $('
回到顶部
');
                this.$goTop = $goTop;
        //此处this指向外部GoTop对象。给对象增加一个属性名为$goTop的属性，值是$goTop(封装过的jquery对象)
                this.bind();
            },
            bind: function () {
                var self = $(this);
        //把外部this保存在self变量中，闭包获取变量是获取的是self变量即外部this(GoTop对象)
                $(window).on('click', function () {
                    //this.show();
                    self.show();
        //on();自身是一个方法，方法即函数，on();内传入一个函数作为参数，此时传入的函数形成闭包，也叫回调函数
        //由于内部function形成闭包，所以内部的this指向的是$(window)。
        //此时若要this指向外部GoTop对象，则需在闭包外部对this做一次保存以便内部闭包作用域链获取
                });
            }
        }

优化滚动停留时间的方法

        $(window).on('scroll', function(){
            if(clock){
                clearTimeout(clock);
            }
            clock = setTimeout(function(){
                //todo
            }, 300);
        });
        //如果没延时停顿300毫秒就消除clock，知道停顿300毫秒时再执行延迟函数todo的内容

2.问答部分

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

    
    
    
    
    
    



    
content
    
content
    
content
    
content
    
content
    
content
    
content
    
content
    
there


    

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

    
    
    
    
    
    



    
content
    
content
    
content
    
content
    
content
    
content
    
content
    
content
    
there


    

3.代码部分

实现如下回到顶部效果 — 当页面滚动到一定距离时，窗口右下角会出现回到顶部按钮，点击按钮页面会滚动到顶部

    
    
    
    
    
    



    
content
    
content
    
content
    
content
    
content
    
content
    
content
    
content
    
content
    
content
    
content


    

图片懒加载

• 方法一

• 方法二