異步加載js文件并執行js方法：實現異步處理網頁的復雜效果? ? ?

? ? 有這么一個場景，當你的網頁頁面效果過多就會造成了打開頁面的速度變得緩慢，長時間處于加載的狀態，這樣的效果通常會讓用戶感到不友好，通常的處理方法是先加載基本的html，然后再加載其他的網頁效果，讓用戶感覺到頁面一下子就出來了，然后其他的網頁效果再慢慢的展現出來。? ? ?這里通過JSLoader組件來實現這種前端的效果

? ? var JSLoader = function(){? ? ? ? ?

? ? ? ? var scripts = {}; // scripts['a.js'] = {loaded:false,funs:[]}? ? ? ? ?

? ? ? ? function getScript(url){? ? ? ? ?

? ? ? ? ? ? var script = scripts[url];? ? ? ? ?

? ? ? ? ? ? if (!script){? ? ? ? ? ? ?

? ? ? ? ? ? ? ? script = {loaded:false, funs:[]};? ? ? ? ? ? ?

? ? ? ? ? ? ? ? scripts[url] = script;? ? ? ? ? ? ?

? ? ? ? ? ? ? ? add(script, url);? ? ? ? ?

? ? ? ? ? ? }? ? ? ? ?

?

? ? ? ? ? ? return script;? ? ?

? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ?

?

? ? ? ? function run(script){? ? ? ? ?

? ? ? ? ? ? var funs = script.funs,? ? ? ? ? ? ?

? ? ? ? ? ? len = funs.length,? ? ? ? ? ? ?

? ? ? ? ? ? i = 0;? ? ? ? ? ? ? ? ?

? ? ? ? ? ? for (; i<len; i++){? ? ? ? ? ? ?

? ? ? ? ? ? ? ? var fun = funs.pop();? ? ? ? ? ? ?

? ? ? ? ? ? ? ? fun();? ? ? ? ?

? ? ? ? ? ? }? ? ?

? ? ? ? }? ? ? ? ?

?

? ? ? ? function add(script, url){

? ? ? ? ? ? var scriptdom = document.createElement('script');? ? ? ? ?

? ? ? ? ? ? scriptdom.type = 'text/javascript';? ? ? ? ?

? ? ? ? ? ? scriptdom.loaded = false;? ? ? ? ?

? ? ? ? ? ? scriptdom.src = url;? ? ? ? ? ? ? ? ?

? ? ? ? ? ? scriptdom.onload = function(){? ? ? ? ? ? ?

? ? ? ? ? ? ? ? scriptdom.loaded = true;? ? ? ? ? ? ?

? ? ? ? ? ? ? ? run(script);? ? ? ? ? ? ?

? ? ? ? ? ? ? ? scriptdom.onload = scriptdom.onreadystatechange = null;? ? ? ? ?

? ? ? ? ? ? };? ? ? ? ?

?

?

? ? ? ? ? ? //for ie? ? ? ?

? ? ? ? ? ? scriptdom.onreadystatechange = function(){

? ? ? ? ? ? ? ? if ((scriptdom.readyState === 'loaded' || scriptdom.readyState === 'complete') && !scriptdom.loaded){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? run(script);? ? ? ? ? ? ? ? ?'

? ? ? ? ? ? ? ? ? ? scriptdom.onload = scriptdom.onreadystatechange = null;? ? ? ? ? ? ?

? ? ? ? ? ? ? ? }? ? ? ? ?

? ? ? ? ? ? };? ? ? ? ? ? ? ? ?

?

? ? ? ? ? ? document.getElementsByTagName('head')[0].appendChild(scriptdom);? ? ?

? ? ? ? }? ? ? ? ?

? ? ? ? return {? ? ? ? ?

? ? ? ? ? ? load: function(url){

? ? ? ? ? ? ? ? var arg = arguments,? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? len = arg.length,? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? i = 1,? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? script = getScript(url),? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? loaded = script.loaded;? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? for (; i<len; i++){? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? var fun = arg[i];? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? if (typeof fun === 'function'){? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? if (loaded) {? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? fun();? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? script.funs.push(fun);

? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ?

? ? ? ? ? ? ? ? }? ? ? ?

? ? ? ? ? ? }? ? ?

? ? ? ? };

? ? }();

?

? ? 調用方法示例： 先在頁面上加載JSLoader.js文件

? ? 然后執行? JSLoader.load('js/test.js' , function () {a();})

? ? 表示異步加載test.js文件，并且加載完成后再執行a()方法，a()方法是test.js里面的方法，a()方法就是負責渲染一些前端頁面的網頁效果來的。 不過該方法在ie7下并不會產生異步的效果，在ie7下需要使用延時觸發器來包裝一下，如：

? ? setTimeout(" JSLoader.load('js/test.js' , function () {a();})", 1);

總結

以上是生活随笔為你收集整理的异步加载js文件并执行js方法：实现异步处理网页的复杂效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。