jquery懒加载、回到顶部

作者: 黑色的五叶草 | 来源:发表于2018-03-23 17:02 被阅读0次

1.知识点部分：

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

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

懒加载图片的等式

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

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

demo：

        var GoTop = {
            init: function () {
                var $goTop = $('<div id="go-top">回到顶部</div>');
                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。用代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        html,
        body,
        p,
            {
            box-sizing: border-box;
        }

        p {
            height: 100px;
            background: pink;
            text-align: center;
            line-height: 100px;
        }

        .test {
            text-align: center;
            background: rgb(111, 238, 196);
            height: 50px;
            line-height: 50px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <div class="test">there</div>


    <script>
        $.fn.isVisible = function(){
            var $self = $(this);  //this指向调用他的jquery对象
            $(window).on('scroll', function(){
                var $me = $(this);  //此处$me保存的this指向window对象
                offsetTop = $self.offset().top,  //记录标记元素到视窗顶端的位置
                $winH = $me.height(),  //获取视窗的高度
                scrollTop = $me.scrollTop(),  //获取窗口当前垂直滚动条的位置
                scrollBottom = $me.scrollTop() + $winH;  //滚动窗口后的位置
            if(offsetTop > scrollTop && scrollBottom > offsetTop){
                console.log(true);
            } else {
                console.log(false);
            }
            })
        }
        $('.test').isVisible();
    </script>
</body>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        html,
        body,
        p,
            {
            box-sizing: border-box;
        }

        p {
            height: 100px;
            background: pink;
            text-align: center;
            line-height: 100px;
        }

        .test {
            text-align: center;
            background: rgb(111, 238, 196);
            height: 50px;
            line-height: 50px;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <div class="test">there</div>


    <script>
        $.fn.isVisible = function(){
            var $self = $(this);
            $(window).on('scroll', function(){
                var $me = $(this),
                    offsetTop = $self.offset().top,
                    $winH = $me.height(),
                    scrollTop = $me.scrollTop(),
                    scrollBottom = $me.scrollTop() + $winH;
            if(!$self.data('data-visible')){
                if(offsetTop > scrollTop && scrollBottom > offsetTop){
                    console.log(true);
                    $self.data('data-visible', true);
                } else {
                    return;
                }
            }
            });
        }
        $('.test').each(function(){
            $(this).isVisible();
        });
    </script>
</body>

</html>

3.代码部分

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>回到顶部</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        html,
        body,
        p,
            {
            box-sizing: border-box;
        }

        p {
            height: 100px;
            background: pink;
            text-align: center;
            line-height: 100px;
        }

        #go-top{
            position: fixed;
            bottom: 10px;
            right: 10px;
            border: 2px solid rgba(255, 0, 0, 0.548);
            border-radius: 5px;
            padding: 10px;
            cursor: pointer;
            display: none;
        }
    </style>
</head>

<body>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>


    <script>
        //方法一：原始jquery使用方法
        var $goTop = $('<div id="go-top">回到顶部</div>');
        $('body').append($goTop);

        $(window).on('scroll', function(){
            var offsetTop = $(this).scrollTop();  //获取窗口当前垂直滚动条的位置
            console.log(offsetTop);
            if(offsetTop > 100){
                $goTop.show();
            } else {
                $goTop.hide();
            }
        });

        $goTop.on('click', function(){
            $(window).scrollTop(0);
        });

        //方法二：把方法保存在对象中形成一个方法，调用时直接调用对象的方法
        var GoTop = {
            init: function(){
                if($('#go-top').length > 0) return;  //判断元素是否存在，避免多次调用
                var $goTop = $('<div id="go-top">回到顶部</div>');
                $('body').append($goTop);
                this.$goTop = $goTop;  //给对象GoTop增加一个属性名为$goTop的属性，值是$goTop(封装过的jquery对象)
                this.bind();  //GoTop对象调用bind()方法
            },
            bind: function(){
                var self = this;  //this指向GoTop对象
                $(window).on('scroll', function(){
                    var offsetTop = $(this).scrollTop();  //this指向window。因为on自身是方法，方法即函数，传递的参数是函数形成回调，构成闭包。此时作用域链的最外层是window，所以this指向window
                    if(offsetTop > 100){
                        self.$goTop.show();
                    } else {
                        self.$goTop.hide()
                    }
                });
                this.$goTop.on('click', function(){
                    $(window).scrollTop(0);
                });
            }
        }
        GoTop.init();
        //方法三：用立即执行函数表达式实现封装
        var  GoTop = (function(){
            var $goTop = $('<div id="go-top">回到顶部</div>');
            $('body').append($goTop);

            function init(){
                $(window).on('scroll', function(){
                    var offsetTop = $(this).scrollTop();
                    console.log(offsetTop);
                    if(offsetTop > 100){
                        $goTop.show();
                    } else {
                        $goTop.hide();
                    }
                });
                $goTop.on('click', function(){
                    $(window).scrollTop(0);
                });
            }
            init();
        })();
    </script>
</body>

</html>

图片懒加载

方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载方法一</title>
    <script src="http://kejian.jirengu.com/static/js/jquery-1.11.1.min.js"></script>
    <style>
        ul, li {
            list-style: none;
        }
        .container {
            width: 600px;
            margin: 0 auto;
        }
        .container li {
            float: left;
            margin: 10px;
        }
        .container li img {
            width: 240px;
            height: 180px;
        }
    </style>
</head>
<body>
    <ul class="container">
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"></a></li>        
    </ul>

    <script>

/*
1. 对于所有的 img 标签，把真实的地址放入自定义属性data-img
2. 当滚动页面时，检查页面所有的 img 标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它
*/
        //方法一：
        //定义滚动停留延迟函数
        var clock;
        $(window).on('scroll', function(){
            //用户鼠标滚轮滚动一次，有多次事件响应。下面的 setTimeout 主要是为性能考虑，只在最后一次事件响应的时候执行 checkshow
            if(clock){
                clearTimeout(clock);  //停留时间如果没到300毫秒，就清除clock，重新计算
            }
            clock = setTimeout(function(){
                lazyRender();  //停留时间到达300毫秒，就执行lazyRender()函数
            }, 300);
        });

        //lazyRender()函数：遍历img标签；如果checkShow(img)函数返回true，同时!isLoaded(img)函数返回false取反为true；就执行载入图片LoadImg(img)函数
        function lazyRender(){
            $('.container img').each(function(){
                //闭包中this指向img
                if(checkShow($(this)) && !isLoaded($(this))){
                    loadImg($(this));
                }
            });
        }
        lazyRender();

        //checkShow()函数：如果图片距离文档位置 < 窗口高度 + 滚动距离。证明图片未载入，此时返回布尔值true
        function checkShow($el){
            var scrollTop = $(window).scrollTop(),  //取得视窗滚动距离
                windowHeight = $(window).height(),  //取得视窗高度
                //注意此处offset().top写法！！！
                offsetTop = $el.offset().top;  //.offset()方法允许我们检索一个元素相对于文档-document的当前位置
            if(offsetTop < scrollTop + windowHeight){
                return true;
            } else {
                return false;
            }
        }

        //isLoaded()函数：判断图片是否被载入过。如果data-src属性等于src属性的地址，证明被再如果，此时返回true
        function isLoaded($el){
            return $el.attr('data-src') == $el.attr('src');
        }

        //loadImg()函数：载入图片函数。将data-src的值传入src属性中
        function loadImg($el){
            $el.attr('src', $el.attr('data-src'));
        }
    </script>
</body>
</html>

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载方法二</title>
    <script src="http://kejian.jirengu.com/static/js/jquery-1.11.1.min.js"></script>
    <style>
        ul, li {
            list-style: none;
        }
        .container {
            width: 600px;
            margin: 0 auto;
        }
        .container li {
            float: left;
            margin: 10px;
        }
        .container li img {
            width: 240px;
            height: 180px;
        }
    </style>
</head>
<body>
    <ul class="container">
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg"></a></li>
        <li><a href="#"><img src="http://kejian.jirengu.com/data/fe/%E8%AF%BE%E4%BB%B6/32-%E6%87%92%E5%8A%A0%E8%BD%BD/code/blank.jpg" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg"></a></li>        
    </ul>

    <script>

/*
1. 对于所有的 img 标签，把真实的地址放入自定义属性data-img
2. 当滚动页面时，检查页面所有的 img 标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它
*/
        //方法二：
        //定义滚动停留延迟函数
        var clock;
        $(window).on('scroll', function(){
            //用户鼠标滚轮滚动一次，有多次事件响应。下面的 setTimeout 主要是为性能考虑，只在最后一次事件响应的时候执行 checkshow
            if(clock){
                clearTimeout(clock);  //停留时间如果没到300毫秒，就清除clock，重新计算
            }
            clock = setTimeout(function(){
                checkShow();  //停留时间到达300毫秒，就执行checkShow()函数
            }, 300);
        });

        // 用户第一次打开页面，还未滚动窗口的时候需要执行一次checkShow
        checkShow();

        //checkShow()函数：遍历img标签;如果img标签有isLoaded属性就直接返回，如果没有继续执行。如果isShow(img)函数返回true，就执行showImg(img)函数
        function checkShow(){
            $('.container img').each(function(){
                //闭包中this指向img
                if($(this).attr('isLoaded')){
                    return;
                }
                if(isShow($(this))){
                    showImg($(this));
                }
            });    
        }

        function isShow($el){
            var scrollH = $(window).scrollTop(),
                winH = $(window).height(),
                top = $el.offset().top;
            if(top < winH + scrollH){
                return true;
            } else {
                return false;
            }
        }

        function showImg($el){
            $el.attr('src', $el.attr('data-src'));
            $el.attr('isLoaded', true);
        }
    </script>
</body>
</html>

jquery懒加载、回到顶部

1.知识点部分：

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

懒加载图片的等式

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

优化滚动停留时间的方法

2.问答部分

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

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

3.代码部分

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

图片懒加载

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程