ページロード後にjsリンクをロードしようとしています

Question

5秒間のページロード後にjsリンクをロードしようとしています。私のページがロードされた後、jsのリンクが動作します。

私のリンクページは5秒後に、負荷であるとき、このリンクは仕事になります

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script> 

です。

Answer 1

あなたはDOM内のスクリプト要素を追加することができます。見てくださいhere。

setTimeout(function(){ 
    var script = document.createElement('script'); 
    script.onload = function() { 
     //do stuff when the script is loaded 
    }; 
    script.src = "//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"; 
    document.head.appendChild(script); //or something of the likes 
}, 5000); 

Answer 2

スクリプトタグにdeferオプションを使用すると便利です。

<script defer src="..."></script> 

このオプションを使用すると、スクリプトのダウンロードと実行がhtml解析に干渉することはありません。

Hereあなたは別のオプションを見ることができます。

Answer 3

あなたはpromisesを使用して、このようなものを使用することができます。

// Make a function to return a promise for the sleep duration 
function sleep(ms) 
{ 
    return new Promise(resolve => setTimeout(resolve, ms)); 
} 

// make a function to handle the sleep 
async function loadNewScript(seconds, src) 
{ 
    await sleep(seconds * 1000); // This is 5 seconds (time in miliseconds) 
    getScript(src); 
} 

// make a function to get the script 
function getScript(src) 
{ 
    return new Promise(function (resolve, reject) 
    { 
     var s; 
     s = document.createElement('script'); 
     s.src = src; 
     s.onload = resolve; 
     s.onerror = reject; 
     document.head.appendChild(s); 
    }); 
} 

// And then just call it on pageload (this is not full page load, only DOM) 
document.addEventListener("DOMContentLoaded", function() 
{ 
    // loadNewScript(seconds, src) 
    loadNewScript(5, "http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"); 
});