首页 > 代码库 > 按序加载

按序加载

2024-09-20 22:51:29   218人阅读

使用“按需加载”进行性能优化时，需要合理选择触发的动作。
“按需加载”的最大优势在于减少了不必要的资源请求，节省流量，真正实现“按需所取”。
但是“按需加载”本身如果使用不当也会影响用户体验，因为“按需加载”的时机在用户触发某动作之后，如果用户的网速比较慢的话，加载脚本或执行脚本可能需要等候较长的时间，而用户则不得不为此付出代价。
因此，如果要使用“按需加载”则需要选择正确的触发动作，如果是根据滚动条来触发，可考虑一个目标距离，假设目标距离还有200像素即将进入可视区域，则就开始加载，而不是等到进入了可视区域才加载。
以上所讲的各种“按需加载”类型，都可以封装成相应的组件，然后就可以在项目中进行应用。



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按序加载</title>
</head>
<style>
    body{
        margin:0px;
        padding:0px;
    }
    .out{
        width:800px;
        height:400px;
        border:1px solid red;
        margin:0 auto;
        margin-bottom: 100px;
    }
    .inner{
        width:200px;
        height:200px;
        border:1px solid blue;
        box-sizing:border-box;
        float:left;
    }
    img{
        width:100%;
        height:100%;
    }
</style>
<body>
<div class=‘out‘>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
</div>

<div class=‘out‘>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
</div>

<div class=‘out‘>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
</div>

<div class=‘out‘>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
</div>

<div class=‘out‘>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
</div>

<div class=‘out‘>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
</div>

<div class=‘out‘>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
</div>

<div class=‘out‘>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
        <div class="inner"><img src=http://www.mamicode.com/"" alt="" aa=‘路径‘></div>
</div>


    <script>
        var out=document.getElementsByClassName(‘out‘);

        document.onscroll=function(){

            var obj=document.documentElement.scrollTop!=0?document.documentElement:document.body;
            for(var i=0;i<out.length;i++){
                if(obj.scrollTop>out[i].offsetTop){
                    var img=out[i].getElementsByTagName(‘img‘);
                    for(var j=0;j<img.length;j++){
                        var aa=img[j].getAttribute(‘aa‘);
                        img[j].src=aa;
                    }
                }
            }

            var clientH=document.documentElement.clientHeight;
            var bodyH=document.body.scrollHeight;
            var l=bodyH-clientH;
            if(obj.scrollTop>l-1){s
                var img=out[out.length-1].getElementsByTagName(‘img‘);
                for(var z=0;z<img.length;z++){
                    var aa=img[z].getAttribute(‘aa‘);
                    img[z].src=aa;
                }
            }
            
        }
    </script>
</body>
</html>

 

按序加载


联系
我们