推遲加載JavaScript的谷歌頁面的見解

我有一個延期加載的JavaScript的代碼我想知道如果代碼將按順序加載腳本（JQuery.min第一次）根據他們在代碼中的位置？推遲加載JavaScript的谷歌頁面的見解

function downloadJSAtOnload() { 


var element01 = document.createElement("script"); 
element01.src = "js/jquery.min.js"; 
document.body.appendChild(element01); 

var element02 = document.createElement("script"); 
element02.src = "js/plugins.js"; 
document.body.appendChild(element02); 

var element03 = document.createElement("script"); 
element03.src = "js/scripts.js"; 
document.body.appendChild(element03); 


var element04 = document.createElement("script"); 
element04.src = "js/SmoothScroll.min.js"; 
document.body.appendChild(element04); 

var element05 = document.createElement("script"); 
element05.src = "js/contact-form.js"; 
document.body.appendChild(element05); 

} 

if (window.addEventListener) 
window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload;

如果這不加載JQuery.min第一，然後其他js文件你怎麼能JQuery.min第一個腳本加載，然後在此之後，其餘已加載？另外我猜測，例如contact-form.js將是第一個完成加載，因爲它很小，所以這可能會導致Uncaught ReferenceError: $ is not defined我猜，因爲JQuery.min尚未完成下載，所以你會如何解決這個問題？我猜測聽衆/如果完成加載加載其他人等待... 在此先感謝

來源

2017-07-21 ui-unicorn.co.uk

你是正確的，你呼喚他們發現爲了通過你不能肯定他們會回來的相同順序。回調或承諾可以解決這個問題。 –

你可以使用承諾加載jquery.min，然後在其餘的加載解決方案？ – CumminUp07

我會研究這個我旁邊沒有承諾的知識 –

這裏Load jQuery with JavaScript using Promises

function loadScript(url) { 
    return new Promise(function(resolve reject) { 
     var script = document.createElement("script"); 
     script.onload = resolve; 
     script.onerror = reject; 
     script.src = url; 
     document.getElementsByTagName("head")[0].appendChild(script); 
    }); 
} 

function loadjQuery() { 
    if (window.jQuery) { 
     // already loaded and ready to go 
     return Promise.resolve(); 
    } else { 
     return loadScript('https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'); 
    } 
} 


// Usage: 
loadjQuery().then(function() { 
    // code here that uses jQuery 
}, function() { 
    // error loading jQuery 
});

來源

2017-07-21 16:19:40 CumminUp07

這看起來不錯，但腳本必須是附在頭上？爲什麼不在結束標籤之後？這個使用promise的代碼是否可以跨瀏覽器工作？另一個小問題，Google可能會懲罰頁面加載，如果整個渲染（加載時）花費太長時間，而不僅僅是第一次渲染。此代碼是否會侵犯本機onload？這將是一個了不起的解決方案，只是想知道它是否有效以及如何。 – ptts

@ptts我不認爲它應該附加到什麼地方。根據這個https://stackoverflow.com/questions/22516959/how-to-determine-if-a-promise-is-supported-by-the-browser它是跨瀏覽器兼容 – CumminUp07

哇，這是偉大的。但是，鏈接中的哪一個回覆是有效的呢？如果我閱讀所有答案，就會有一些爭議。 – ptts

這很快，但我認爲它應該工作。

function downloadJSAtOnload() { 
    var element01 = document.createElement("script"); 
    element01.src = "js/jquery.min.js"; 
    document.body.appendChild(element01); 

    element01.onload = function() { 
     var element02 = document.createElement("script"); 
     element02.src = "js/plugins.js"; 
     document.body.appendChild(element02); 

     var element03 = document.createElement("script"); 
     element03.src = "js/scripts.js"; 
     document.body.appendChild(element03); 


     var element04 = document.createElement("script"); 
     element04.src = "js/SmoothScroll.min.js"; 
     document.body.appendChild(element04); 

     var element05 = document.createElement("script"); 
     element05.src = "js/contact-form.js"; 
     document.body.appendChild(element05); 
    } 
}

來源

2017-07-21 16:02:24

我試圖滿足谷歌頁面的見解/摺疊上方在我的網站文件，所以尋找一個解決方案，加載jquery.min.js，也擺脫了 –

@Neths上面的摺疊警告，所以，你想能夠加載jquery.min.js，一旦它是完全加載然後加載其餘的？這能解決你的問題嗎？ –

我認爲這是因爲如果juqery.min.js完全加載第一個它不會拋出$未定義的錯誤 –

推遲加載JavaScript的谷歌頁面的見解

回答

相關問題