Загружать скрипты после загрузки страницы?

Можно ли загружать определенные скрипты типа

<script type="text/javascript" src="somescript.js"></script>

когда загружена остальная страница страницы?

Представьте, что у меня есть несколько больших script файлов, которые не нужны, когда страница загружается. Например. Я использую API Карт Google, который используется только при нажатии кнопки (а не на загрузке страницы).

Можно ли сначала загрузить остальную часть страницы, прежде чем обрабатывать те теги script в моей голове?

Ответ 1

В JQuery вы можете сделать это в готовом документе

$.getScript("somescript.js", function(){
   alert("Script loaded and executed.");
 });

Ответ 2

Это возможно. Я делал подобное на сайте AJAX, но загружал API графиков Google. Вот код, который я использовал для загрузки API графиков Google, когда на странице была нажата кнопка.

function loadGoogleChartsAPI() {
    var script = document.createElement("script");
    // This script has a callback function that will run when the script has
    // finished loading.
    script.src = "http://www.google.com/jsapi?callback=loadGraphs";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

function loadGraphs() {
    // Add callback function here.
}

В этом случае используется функция обратного вызова, которая будет запускаться при загрузке script.

Ответ 3

просто вы можете добавить в этот script файл defer параметр

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

вы также можете проверить этот вопрос

Ответ 4

Никто не упоминал об этом?

$(window).load(function(){
    // do something 
});

или

$(window).bind("load", function() {
   // do something
});

Ответ 5

$(document).ready(function() {
    var ss = document.createElement("script");
    ss.src = "somescript.js";
    ss.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(ss);
});

Ответ 6

Да, это возможно путем динамического ввода файлов JavaScript из кода. Существует множество библиотек, которые вы можете использовать: RequireJS, HeadJS и т.д. Недавно я нашел этот документ, который сравнивает множество библиотек загрузчика JavaScript.

Ответ 7

Пожалуйста, смотрите мой код. Событие onload произойдет, когда скрипт завершит загрузку. Или произойдет событие ошибки.

function loadJavaScript() {
    var script = document.createElement("script");
    script.src = "javaScript.js";
    script.type = "text/javascript";
    script.onload = function () {
        console.log('script was loaded successfully');
    }
    script.onerror = function (e) {
        console.error('script.onerror');
    }
    document.getElementsByTagName("head")[0].appendChild(script);
}

Благодаря ответу.

Также смотрите мой код загрузки скрипта.

Ответ 8

используйте метод jScript для getScript! или попробуйте просто поместить этот script в конец страницы?

Ответ 9

Да, это вполне возможно. Добавьте событие onLoad="foo();" в тэг <body> и вызовите его для скриптов. Вам нужно будет обернуть внешний JS в функцию и сделать что-то вроде:

//EXTERNAL JS (jsstuff.js)

function Mojo() {
    document.getElementById('snacks').style.visibility = "visible";
    alert("we are victorious!");
}

//YOUR HTML

<html>
    <head>
        <script type='text/javascript'></script>
    </head>
    <body onLoad='Mojo();'>
        <div id='snacks'>
            <img src='bigdarnimage.png'>
        </div>
    </body>
</html>

Ответ 10

Чтобы разрешить отображение страницы до загрузки скрипта, используйте атрибут async:

<script src="//url/to/script.js" async></script>

Чтобы скрыть загрузчик в браузере, добавьте тег сценария после завершения загрузки страницы:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var script = document.createElement('script');
  script.src = '//url/to/script.js';
  document.getElementsByTagName('body')[0].appendChild(script);
});
</script>