按序加载
使用“按需加载”进行性能优化时，需要合理选择触发的动作。
“按需加载”的最大优势在于减少了不必要的资源请求，节省流量，真正实现“按需所取”。
但是“按需加载”本身如果使用不当也会影响用户体验，因为“按需加载”的时机在用户触发某动作之后，如果用户的网速比较慢的话，加载脚本或执行脚本可能需要等候较长的时间，而用户则不得不为此付出代价。
因此，如果要使用“按需加载”则需要选择正确的触发动作，如果是根据滚动条来触发，可考虑一个目标距离，假设目标距离还有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){
//获取当前板块内的img集合 var img=out[i].getElementsByTagName('img'); for(var j=0;j<img.length;j++){
//获取img的自定义属性aa 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){ 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>
posted on 2017-05-10 11:28 skylark_one 阅读(120) 评论(1) 编辑 收藏 举报
