按序加载
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了按序加载相关的知识，希望对你有一定的参考价值。
使用“按需加载”进行性能优化时，需要合理选择触发的动作。
“按需加载”的最大优势在于减少了不必要的资源请求，节省流量，真正实现“按需所取”。
但是“按需加载”本身如果使用不当也会影响用户体验，因为“按需加载”的时机在用户触发某动作之后，如果用户的网速比较慢的话，加载脚本或执行脚本可能需要等候较长的时间，而用户则不得不为此付出代价。
因此，如果要使用“按需加载”则需要选择正确的触发动作，如果是根据滚动条来触发，可考虑一个目标距离，假设目标距离还有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>
以上是关于按序加载的主要内容，如果未能解决你的问题，请参考以下文章
Android 逆向类加载器 ClassLoader ( 类加载器源码简介 | BaseDexClassLoader | DexClassLoader | PathClassLoader )(代码片段