九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP，暢享免費(fèi)電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
Web移動端使用localStorage緩存Js和css文件
                  將jquery和公共樣式緩存到localStorage，可以減少Http請求，從而優(yōu)化頁面加載時間，下面的代碼可以實(shí)現(xiàn)此功能：
[javascript] view plain copy
 print?
  1. <script type="text/javascript">  
  2.        //入口函數(shù)  
  3.                if (window.localStorage) {  
  4.                    initJs();  
  5.                    initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css");  
  6.                } else {  
  7.                    addFile("/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js", "js");  
  8.                    addFile("/gfdzp201508257998/Turntable/Script/whir.turntable.js", "js");  
  9.                    addFile("/gfdzp201508257998/Turntable/Style/css_whir.css", "css");  
  10.                }  
  11.   
  12.   
  13.        //第一步：加載頁面js：先加載jQuery后加載用戶腳本  
  14.        function initJs() {  
  15.            var name = "jquery";  
  16.            var url = "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js";  
  17.            var xhr;  
  18.            var js = window.localStorage ? localStorage.getItem(name) : "";  
  19.            if (js == null || js.length == 0) {  
  20.                if (window.ActiveXObject) {  
  21.                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
  22.                } else if (window.XMLHttpRequest) {  
  23.                    xhr = new XMLHttpRequest();  
  24.                }  
  25.                xhr.open("GET", url);  
  26.                xhr.send(null);  
  27.                xhr.onreadystatechange = function () {  
  28.                    if (xhr.readyState == 4 && xhr.status == 200) {  
  29.                        js = xhr.responseText;  
  30.                        localStorage.setItem(name, js);  
  31.                        js = js == null ? "" : js;  
  32.                        addTxt(js, "js");  
  33.                        initTurntable(); //確保先引用Jquery  
  34.                    }  
  35.                };  
  36.            } else {  
  37.                addTxt(js, "js");  
  38.                initTurntable();  
  39.            }  
  40.        }  
  41.   
  42.        //加載自定義腳本  
  43.        function initTurntable() {  
  44.            var name = "turntable";  
  45.            var url = "/gfdzp201508257998/Turntable/Script/whir.turntable.js";  
  46.            var xhr;  
  47.            var js = window.localStorage ? localStorage.getItem(name) : "";  
  48.            if (js == null || js.length == 0) {  
  49.                if (window.ActiveXObject) {  
  50.                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
  51.                } else if (window.XMLHttpRequest) {  
  52.                    xhr = new XMLHttpRequest();  
  53.                }  
  54.                xhr.open("GET", url);  
  55.                xhr.send(null);  
  56.                xhr.onreadystatechange = function () {  
  57.                    if (xhr.readyState == 4 && xhr.status == 200) {  
  58.                        js = xhr.responseText;  
  59.                        localStorage.setItem(name, js);  
  60.                        js = js == null ? "" : js;  
  61.                        addTxt(js, "js");  
  62.                    }  
  63.                };  
  64.            } else {  
  65.                addTxt(js, "js");  
  66.            }  
  67.        }  
  68.   
  69.        //第二步：初始化Css  
  70.        function initCss(name, url) {  
  71.            var xhr;  
  72.            var css = window.localStorage ? localStorage.getItem(name) : "";  
  73.            if (css == null || css.length == 0) {  
  74.                if (window.ActiveXObject) {  
  75.                    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
  76.                } else if (window.XMLHttpRequest) {  
  77.                    xhr = new XMLHttpRequest();  
  78.                }  
  79.                xhr.open("GET", url);  
  80.                xhr.send(null);  
  81.                xhr.onreadystatechange = function () {  
  82.                    if (xhr.readyState == 4 && xhr.status == 200) {  
  83.                        css = xhr.responseText;  
  84.                        localStorage.setItem(name, css);  
  85.                        css = css == null ? "" : css;  
  86.                        css = css.replace(/images\//g, "style/images/");  
  87.                        addTxt(css, "css");  
  88.                    }  
  89.                };  
  90.            } else {  
  91.                css = css.replace(/images\//g, "style/images/");  
  92.                addTxt(css, "css");  
  93.            }  
  94.        }  
  95.   
  96.        //輔助方法1：動態(tài)添加js，css文件引用  
  97.        function addFile(url, fileType) {  
  98.            var head = document.getElementsByTagName('HEAD').item(0);  
  99.            var link;  
  100.            if (fileType == "js") {  
  101.                link = document.createElement("script");  
  102.                link.type = "text/javascript";  
  103.                link.src = url;  
  104.            } else {  
  105.                link = document.createElement("link");  
  106.                link.type = "text/css";  
  107.                link.rel = "stylesheet";  
  108.                link.rev = "stylesheet";  
  109.                link.media = "screen";  
  110.                link.href = url;  
  111.            }  
  112.            head.appendChild(link);  
  113.        }  
  114.   
  115.        //輔助方法2：動態(tài)添加js，css文件內(nèi)容   
  116.        function addTxt(text, fileType) {  
  117.            var head = document.getElementsByTagName('HEAD').item(0);  
  118.            var link;  
  119.            if (fileType == "js") {  
  120.                link = document.createElement("script");  
  121.                link.type = "text/javascript";  
  122.                link.innerHTML = text;  
  123.            } else {  
  124.                link = document.createElement("style");  
  125.                link.type = "text/css";  
  126.                link.innerHTML = text;  
  127.            }  
  128.            head.appendChild(link);  
  129.        }  
  130.    </script>  

查看寫入記錄：


封裝成JS插件：

[javascript] view plain copy
 print?
  1. /** 
  2. * 插件功能：使用localStorage緩存js和css文件，減少http請求和頁面渲染時間，適用于Web移動端H5頁面制作。 
  3. * 插件作者：zhangqs008@163.com 
  4. * 使用方法：   
  5. *   1.使用此插件前，需要給插件的pageVersion變量賦值，建議變量值由服務(wù)器后端輸出，當(dāng)需要更新客戶端資源時，修改版本值即可。 
  6. *   2.加載Js：由于js加載有順序要求，所以需要將后加載的腳本作為前一個腳本的回調(diào)參數(shù)傳入，如： 
  7. *   whir.res.loadJs("jquery", "<%= BasePath %>Turntable/Script/jquery-1.8.3.min.js", 
  8. *       function () { 
  9. *            whir.res.loadJs("turntable", "Script/whir.turntable.js", null); 
  10. *    }); 
  11. *   3.加載css，如：whir.res.loadCss("css", "/Style/css_whir.css", null); 
  12. */  
  13. var whir = window.whir || {};  
  14. whir.res = {  
  15.     pageVersion: "", //頁面版本，由頁面輸出，用于刷新localStorage緩存  
  16.     //動態(tài)加載js文件并緩存  
  17.     loadJs: function (name, url, callback) {  
  18.         if (window.localStorage) {  
  19.             var xhr;  
  20.             var js = localStorage.getItem(name);  
  21.             if (js == null || js.length == 0 || this.pageVersion != localStorage.getItem("version")) {  
  22.                 if (window.ActiveXObject) {  
  23.                     xhr = new ActiveXObject("Microsoft.XMLHTTP");  
  24.                 } else if (window.XMLHttpRequest) {  
  25.                     xhr = new XMLHttpRequest();  
  26.                 }  
  27.                 if (xhr != null) {  
  28.                     xhr.open("GET", url);  
  29.                     xhr.send(null);  
  30.                     xhr.onreadystatechange = function () {  
  31.                         if (xhr.readyState == 4 && xhr.status == 200) {  
  32.                             js = xhr.responseText;  
  33.                             localStorage.setItem(name, js);  
  34.                             localStorage.setItem("version", whir.res.pageVersion);  
  35.                             js = js == null ? "" : js;  
  36.                             whir.res.writeJs(js);  
  37.                             if (callback != null) {  
  38.                                 callback(); //回調(diào)，執(zhí)行下一個引用  
  39.                             }  
  40.                         }  
  41.                     };  
  42.                 }  
  43.             } else {  
  44.                 whir.res.writeJs(js);  
  45.                 if (callback != null) {  
  46.                     callback(); //回調(diào)，執(zhí)行下一個引用  
  47.                 }  
  48.             }  
  49.         } else {  
  50.             whir.res.linkJs(url);  
  51.         }  
  52.     },  
  53.     loadCss: function (name, url) {  
  54.         if (window.localStorage) {  
  55.             var xhr;  
  56.             var css = localStorage.getItem(name);  
  57.             if (css == null || css.length == 0 || this.pageVersion != localStorage.getItem("version")) {  
  58.                 if (window.ActiveXObject) {  
  59.                     xhr = new ActiveXObject("Microsoft.XMLHTTP");  
  60.                 } else if (window.XMLHttpRequest) {  
  61.                     xhr = new XMLHttpRequest();  
  62.                 }  
  63.                 if (xhr != null) {  
  64.                     xhr.open("GET", url);  
  65.                     xhr.send(null);  
  66.                     xhr.onreadystatechange = function () {  
  67.                         if (xhr.readyState == 4 && xhr.status == 200) {  
  68.                             css = xhr.responseText;  
  69.                             localStorage.setItem(name, css);  
  70.                             localStorage.setItem("version", whir.res.pageVersion);  
  71.                             css = css == null ? "" : css;  
  72.                             css = css.replace(/images\//g, "style/images/"); //css里的圖片路徑需單獨(dú)處理  
  73.                             whir.res.writeCss(css);  
  74.                         }  
  75.                     };  
  76.                 }  
  77.             } else {  
  78.                 css = css.replace(/images\//g, "style/images/"); //css里的圖片路徑需單獨(dú)處理  
  79.                 whir.res.writeCss(css);  
  80.             }  
  81.         } else {  
  82.             whir.res.linkCss(url);  
  83.         }  
  84.     },  
  85.     //往頁面寫入js腳本  
  86.     writeJs: function (text) {  
  87.         var head = document.getElementsByTagName('HEAD').item(0);  
  88.         var link = document.createElement("script");  
  89.         link.type = "text/javascript";  
  90.         link.innerHTML = text;  
  91.         head.appendChild(link);  
  92.     },  
  93.     //往頁面寫入css樣式  
  94.     writeCss: function (text) {  
  95.         var head = document.getElementsByTagName('HEAD').item(0);  
  96.         var link = document.createElement("style");  
  97.         link.type = "text/css";  
  98.         link.innerHTML = text;  
  99.         head.appendChild(link);  
  100.     },  
  101.     //往頁面引入js腳本  
  102.     linkJs: function (url) {  
  103.         var head = document.getElementsByTagName('HEAD').item(0);  
  104.         var link = document.createElement("script");  
  105.         link.type = "text/javascript";  
  106.         link.src = url;  
  107.         head.appendChild(link);  
  108.     },  
  109.     //往頁面引入css樣式  
  110.     linkCss: function (url) {  
  111.         var head = document.getElementsByTagName('HEAD').item(0);  
  112.         var link = document.createElement("link");  
  113.         link.type = "text/css";  
  114.         link.rel = "stylesheet";  
  115.         link.rev = "stylesheet";  
  116.         link.media = "screen";  
  117.         link.href = url;  
  118.         head.appendChild(link);  
  119.     }  
  120. }  


調(diào)用該插件：

[javascript] view plain copy
 print?
  1. <script type="text/javascript">  
  2.     //入口函數(shù)  
  3.     whir.res.pageVersion = "1002";  //頁面版本，用于檢測是否需要更新緩存  
  4.     whir.res.loadJs("jquery", "/gfdzp201508257998/Turntable/Script/jquery-1.8.3.min.js",  
  5.      function () {  
  6.          whir.res.loadJs("turntable", "/gfdzp201508257998/Turntable/Script/whir.turntable.js", null);  
  7.      });  
  8.     whir.res.loadCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css", null);  
  9. </script>  


本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
[渣教程]chrome插件制作入門
Web前端離線緩存應(yīng)用
threejs第五篇【一條龍測試之四 threejs 給obj模型貼圖】
[前端]圖片預(yù)加載方法
JS 插件
html5/haXe開發(fā)偶感
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服