懒加载原理分析及实例

快来打我* 2022-05-26 02:47 226阅读 0赞

懒加载的原理及实现

什么是懒加载？

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

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

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

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

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关键代码

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代码

CSS代码

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);
    
    });
    });