Отложить выполнение встроенного javascript?

На моем веб-сайте у меня есть множество встроенных фрагментов javascript. Большинство из них требуют jquery и подобных материалов.

Но я бы хотел отложить загрузку jquery до того, как страница была отображена. И это означает, что мой встроенный javascript будет выполнен, прежде чем jquery будет загружен. Могу ли я что-нибудь сделать? Я ищу простой в реализации решений (я также не могу переместить мой встроенный javascript, поскольку он автоматически создается, пока страница готовится для пользователя).

Ответы

Ответ 1

Было бы намного лучше, если бы вы могли разместить свой javascript в конце документа. Посыпка вашего источника небольшими встроенными фрагментами javascript является убийцей на странице производительности.

Тем не менее, вы можете создать массив и нажать функции в этом массиве. Затем, в конце вашей страницы, сразу после загрузки jquery, проведите цикл над массивом и выполните каждую функцию.

например:.

<html>
  ...
  <script>window.loadEvents = [];</script>
  ...
  <script>loadEvents.push(function() { alert("inline code here"); });</script>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>$.each(loadEvents, function(_,f) { f(); });</script>
</html>

Однако, как я уже сказал, было бы лучше просто вставить все элементы script в нижнюю часть страницы, вместо переключения между html и javascript. Если вы это сделаете, производительность рендеринга будет сильно снижена.

Ответ 2

Вы можете моделировать отсрочку, установив type встроенных скриптов в тот, который не будет обрабатываться браузером, например text/example, и клонирование этих сценариев в конце документа, заменяя type на text/javascript.

Код, обрабатывающий все text/examples, действительно прост:

window.addEventListener("load", function() {

    var arr = document.querySelectorAll("script[type='text/example']");
    for (var x = 0; x < arr.length; x++) {
        var cln = arr[x].cloneNode(true);
        cln.type = "text/javascript";
        document.querySelectorAll("body")[0].appendChild(cln);
    }

});

Или, если вы предпочитаете использовать jQuery (вам придется добавить этот script после, включая файл jQuery):

$(function() {
    $("script[type='text/example']").each(function() {
        $(this).clone().attr("type","text/javascript").appendTo("body"); 
    });
});

Этот код ждет, пока страница не загрузится, затем выберите все сценарии с типом text/example и скопирует их в конце body с типом text/javascript, чтобы они выполнялись нормально.

Например:

...
<script type="text/example">
    console.log("I am before the h1");
</script>

<h1>Page Title</h1>

<script type="text/javascript">
    console.log("I am after the h1");
</script>
...

В результате появятся следующие сообщения в консоли:

Я после h1

Я до h1

Вы можете увидеть запущенную демонстрацию на этом JSFiddle: http://jsfiddle.net/rqckwc79/

Плюсы этого решения:

  • Это кросс-браузерное решение.
  • Код действителен HTML/JavaScript.
  • Он работает в строгом режиме.

Недостатки этого решения:

  • Вам нужно иметь контроль над встроенными скриптами, чтобы изменить type.
  • Как сказал troelskn, производительность будет хуже, чем перемещение всего кода на дно (но я понимаю, что есть ситуации, когда это невозможно).
  • Он не работает в старых версиях IE (хотя код может быть изменен для их поддержки).