懒加载的原理及实现

懒加载原理
1、先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-original)。
当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
2、这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>餐饮营销专题</title>
    <meta name="keywords" content="餐饮营销专题">
    <meta name="description" content="餐饮营销专题">
    <style>
        *{padding:0;margin:0;}
        html,body,.swiper-container,.swiper-wrapper,.swiper-slide{width:100%;}
        html{font: 12px/1.5 "Microsoft YaHei","PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif;}
        img{vertical-align: middle;}
        a{text-decoration:none;}
        .swiper-slide{background-position:50% 50%; position:relative;overflow: hidden;text-align: center;}
        .swiper-slide img{width:100%;}
        .food-nav-box{width:100%;position:absolute;top:0;left:0;height:80px;border-bottom:1px solid rgba(255,255,255,0.71);}
        .food-nav{width:1200px;margin:0 auto;height:40px;padding:20px 0;}
        .food-logo{float:left;}
        .food-back{float:right;}
        .food-box{width:1200px;margin:0 auto;height:80px;position:relative;}
        .food-back a{background:rgba(255,255,255,0.16);width:120px;height:40px;border-radius: 30px;border:1px solid #fff;font-size:14px;color:#fff;text-align: center;line-height:40px;display: inline-block;}
        .food-footer{width:100%;position:fixed;bottom:0;z-index:999;background-image:url("http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject11.png");height:80px;background-position: center;}
        #food-btm-close{position:absolute;top:30px;right:0;cursor: pointer;}
    </style>
</head>
<body>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide1">
            <div class="food-nav-box">
                <div class="food-nav">
                    <div class="food-logo">
                        <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/food_logo.png" style="width:329px;" alt="DMLei-一站式新媒体营销平台">
                    </div>
                    <div class="food-back">
                        <a href="/">返回首页</a>
                    </div>
                </div>
            </div>
            <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject1.png" alt="">
        </div>
        <div class="swiper-slide slide2">
            <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject22.png" alt="">
        </div>
        <div class="swiper-slide slide3">
            <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject33.png" alt="">
        </div>
        <div class="swiper-slide slide4">
            <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject44.png" alt="">
        </div>
        <div class="swiper-slide slide5">
            <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject55.png" alt="">
        </div>
        <div class="swiper-slide slide6">
            <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject66.png" alt="">
        </div>
        <div class="swiper-slide slide7">
            <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject77.png" alt="">
        </div>
        <div class="swiper-slide slide8">
            <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject88.png" alt="">
        </div>
        <div class="swiper-slide slide9" style="margin-bottom:80px;">
            <img src="http://7xnlea.com2.z0.glb.qiniucdn.com/loading_food.png" data-original = "http://7xnlea.com2.z0.glb.qiniucdn.com/foodProject99.png" alt="">
        </div>        
    </div>
</div>

<div class="food-footer">
    <div class="food-box">
        <img id="food-btm-close" src="http://7xnlea.com2.z0.glb.qiniucdn.com/food-close.png" alt="">
    </div>
</div>

<script src="http://7xnlea.com2.z0.glb.qiniucdn.com/jquery.min.js"></script>
</body>
<script>
    $("#food-btm-close").click(function(){
        $(".food-footer").animate({height:"0px"});
        $(".slide10").css('margin-bottom','0');
    })
</script>
<script>

    var aImages = document.images;
    loadImg(aImages);
    window.onscroll = function(){
        loadImg(aImages);
    };
    function loadImg(arr){
        for( var i = 0,len = arr.length; i < len; i++){
            if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
                arr[i].isLoad = true;
                arr[i].style.cssText = "transition: ''; opacity: 0;"
                if(arr[i].dataset){
                    aftLoadImg(arr[i],arr[i].dataset.original);
                }else{
                    aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
                }
                (function(i){
                    setTimeout(function(){
                        arr[i].style.cssText = "transition: 1s; opacity: 1;"
                    },16)
                })(i);
            }
        }
    }
    function aftLoadImg(obj,url){
        var oImg = new Image();
        oImg.onload = function(){
            obj.src = oImg.src;
        }
        oImg.src = url;
    }

</script>

</html>

欢迎分享本文,转载请保留出处:前端ABC » 懒加载的原理及实现

赞 (4)
分享到:更多 ()

发表评论 0