首頁猿問異步加載腳本

異步加載腳本

JavaScript Html/CSS Html5

牛魔王的故事 2019-07-09 10:22:45

異步加載腳本我正在使用來自JQuery的幾個插件、自定義小部件和其他庫。因此，我有幾個.js和.css文件。我需要為我的網(wǎng)站創(chuàng)建一個加載程序，因為它需要一些時間來加載。如果我能夠在導(dǎo)入所有以下內(nèi)容之前顯示加載程序，那就太好了：<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script><script type="text/javascript" src="js/myFunctions.js"></script> <link type="text/css" href="css/main.css" rel="stylesheet" />... .... etc我已經(jīng)找到了幾個教程，使我能夠異步導(dǎo)入JavaScript庫。例如，我可以這樣做： (function () { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'js/jquery-ui-1.8.16.custom.min.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();由于某種原因，當(dāng)我對所有文件做同樣的事情時，頁面就不工作了。我一直試圖找出問題出在哪里，但我就是找不到。首先，我認(rèn)為這可能是因為一些javascript函數(shù)依賴于其他函數(shù)。但是，我使用超時函數(shù)按正確的順序加載它們，當(dāng)一個函數(shù)完成時，我繼續(xù)進(jìn)行下一個操作，頁面的行為仍然很奇怪。例如，我不能點擊鏈接等.。但是動畫仍然有效.。亞細(xì)亞我一直在想.。我相信瀏覽器有緩存，這就是為什么第一次加載頁面需要很長時間，下一次加載速度很快。因此，我想做的是用異步加載所有這些文件的頁面替換index.html頁面。完成Ajax之后，將所有這些文件重定向到我計劃使用的頁面。在使用該頁面時，加載不需要很長時間，因為文件應(yīng)該已經(jīng)包含在瀏覽器的緩存中。在我的索引頁面(.js和.css文件異步加載的頁面)上，我不關(guān)心獲取錯誤。我只會顯示一個加載程序并在完成后重定向頁面.這個主意是個好選擇嗎？還是應(yīng)該繼續(xù)嘗試實現(xiàn)異步方法？

查看完整描述

3 回答

揚(yáng)帆大魚

TA貢獻(xiàn)1799條經(jīng)驗獲得超9個贊

當(dāng)完成加載的所有腳本都重定向到index2.html，其中index2.html使用相同的庫時，我異步加載腳本(html 5具有此特性)。因為一旦頁面重定向到index2.html，瀏覽器就會有一個緩存，所以index2.html加載不到一秒鐘，因為它擁有加載頁面所需的全部內(nèi)容。在index.html頁面中，我還加載了我計劃使用的圖像，以便瀏覽器將這些圖像放在緩存中。所以我的index.html看起來是：

<!DOCTYPE html><html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Project Management</title>

    <!-- the purpose of this page is to load all the scripts on the browsers cache so that pages can load fast from now on -->

    <script type="text/javascript">

        function stylesheet(url) {
            var s = document.createElement('link');
            s.type = 'text/css';
            s.async = true;
            s.src = url;
            var x = document.getElementsByTagName('head')[0];
            x.appendChild(s);
        }

        function script(url) {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = url;
            var x = document.getElementsByTagName('head')[0];
            x.appendChild(s);
        }

        //load scritps to the catche of browser
        (function () {            
                stylesheet('css/custom-theme/jquery-ui-1.8.16.custom.css');
                stylesheet('css/main.css');
                stylesheet('css/marquee.css');
                stylesheet('css/mainTable.css');

                script('js/jquery-ui-1.8.16.custom.min.js');
                script('js/jquery-1.6.2.min.js');
                script('js/myFunctions.js');
                script('js/farinspace/jquery.imgpreload.min.js');
                script('js/marquee.js');            
        })();

    </script>

    <script type="text/javascript">
       // once the page is loaded go to index2.html
        window.onload = function () {
            document.location = "index2.html";
        }
    </script></head><body><div id="cover" style="position:fixed; left:0px; top:0px; width:100%; height:100%; background-color:Black;
     z-index:100;">Loading</div><img src="images/home/background.png" /><img src="images/home/3.png"/><img src="images/home/6.jpg"/>
     <img src="images/home/4.png"/><img src="images/home/5.png"/><img src="images/home/8.jpg"/><img src="images/home/9.jpg"/>
     <img src="images/logo.png"/><img src="images/logo.png"/><img src="images/theme/contentBorder.png"/></body></html>

另一個好的方面是，我可以在頁面中放置一個加載器，當(dāng)頁面完成后，加載器就會消失，在毫秒內(nèi)，新頁面將運行。

反對回復(fù) 2019-07-09

3 回答
0 關(guān)注
558 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

異步加載腳本

異步加載腳本

3 回答

相關(guān)問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

異步加載腳本

異步加載腳本

3 回答

相關(guān)問題推薦

添加回答