懒加载原理分析及实例

懒加载的原理及实现

什么是懒加载？

懒加载其实就是延迟加载，是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区的图片而不是一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时一次性加载过多资源。

典型的懒加载：当用户滚动图片进入可视区的时候，才去加载图片，或者用户点击选项卡，原本隐藏的图片此时再去加载，这个也称为懒加载。

实例一：懒加载图片：先将img标签中的src链接设为同一张图片，将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视区的时候，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。（这样做能防止一次性向服务器响应大量请求，导致服务器响应慢，出现页面卡段或崩溃等问题）

HTML部分代码（因为大部分都一样，所以省略就写一点）

<a class="myImg" href="#"><img class="img" _src="../imgs/1.jpg" src="../imgs/empt.jpg" alt="loading"/></a>
<a class="myImg" href="#"><img class="img" _src="../imgs/2.jpg" src="../imgs/empt.jpg" alt="loading"/></a>
<a class="myImg" href="#"><img class="img" _src="../imgs/3.jpg" src="../imgs/empt.jpg" alt="loading"/></a>

js代码

$(function(){
  toLoad();
        $(window).scroll(function(){
            toLoad();
        });
        function toLoad(){
            $('.img').each(function(i,elem){

                if($(elem).offset().top<$(document).scrollTop()+$(window).height()){
                    $(elem).attr('src',$(elem).attr('_src'));
                }
            });
        }
});

实例二：当滚动条滚动一段距离后，出现回到顶部的按钮，当点击按钮时，回到顶部。

HTML关键代码

 <button id="btn">回到顶部</button>

css代码

html{height:2000px;}
#btn{
            display:none;
            position:fixed; right:4px; bottom:20px;
        }

js代码

$(function(){
  $(window).scroll(function(){
            if($(document).scrollTop()>$(window).height()){
                $('#btn').css('display','block');
            }else{
                $('#btn').css('display','none');
            }

        });
        $('#btn').click(function(){
            $(document).scrollTop(0);

        });
});

实例三、选项卡懒加载

和实例一原理一样，此处不再赘述

HTML代码

<div id="wrap">
    <div id="btn">
        <button class="active">选项1</button>
        <button>选项2</button>
        <button>选项3</button>
    </div>
    <div id="box">
        <div class="active"><a href="#"><img _src="../imgs/1.jpg" src="../imgs/1.jpg"/></a></div>
        <div><a href="#"><img _src="../imgs/2.jpg"/></a></div>
        <div><a href="#"><img _src="../imgs/3.jpg"/></a></div>
    </div>
</div>

CSS代码

    <style>
        #wrap{
            width:300px; height:300px;  margin:10px auto;
        }
        #btn{height:98px; line-height:98px; text-align:center;}
        #box{width:298px;height:200px; border:1px solid #e15671;}
        #box div{
            width:298px;height:200px; display:none;
        }
        #box div img{width:100%; height:100%; display:inline-block;}
        #btn .active{background-color:#f10215;}
        #box  .active{display:block;}
    </style>

js代码

$(function(){
  $('button').click(function(){
    $(this).attr('class','active').siblings('button').attr('class','');
    $('#box').find('div').eq($(this).index('button')).attr('class','active').siblings('div').attr('class','');
  var $src =  $('img').eq($(this).index()).attr('_src');
    $('img').eq($(this).index()).attr('src',$src);

});
});