使用“按需加载”进行性能优化时，需要合理选择触发的动作。“按需加载”的最大优势在于减少了不必要的资源请求，节省流量，真正实现“按需所取”。但是“按需加载”本身如果使用不当也会影响用户体验，因为“按需加载”的时机在用户触发某动作之后，如果用户的网速比较慢的话，加载脚本或执行脚本可能需要等候较长的时间，而用户则不得不为此付出代价。因此，如果要使用“按需加载”则需要选择正确的触发动作，如果是根据滚动条来触发，可考虑一个目标距离，假设目标距离还有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="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
</div>
<div class=‘out‘>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
</div>
<div class=‘out‘>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
</div>
<div class=‘out‘>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
</div>
<div class=‘out‘>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
</div>
<div class=‘out‘>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
</div>
<div class=‘out‘>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
</div>
<div class=‘out‘>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" alt="" aa=‘路径‘></div>
<div class="inner"><img src="" 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>
时间： 2024-11-11 07:09:30