Запуск javascript после страницы полностью отображается

Я пытаюсь создать синтаксический ярлык script. Я попытался использовать мой script в коде с 10 тысячами строк, и все, что я вижу, - это пустая страница, пока она загружается. Все будет отображаться после завершения script задачи. Кстати, я назвал свой script внутри готовой функции jQuery.

$(myFunction);

script должен выполняться после полной визуализации страницы, и пользователь может фактически перемещаться по странице, даже если script еще не закончен. Javascript будет работать в фоновом режиме, поскольку он выделяет код один за другим, но не мешает повторности страницы. Спасибо заранее.

EDIT:

Чтобы сделать это более ясным, я хотел бы выполнить код после того, как все будет "визуализировано", а не "загружено". Все должно быть видно на экране, и пользователь может увидеть, как код оживает, когда он подсвечивается. Спасибо.

Ответ 1

Вы имеете в виду после загрузки всех изображений?

Я думаю, window.onload - это то, что вы ищете

window.onload = function() {
    //dom not only ready, but everything is loaded
};

ИЗМЕНИТЬ

Комментарий Пер Криса, здесь путь jQuery:

$(window).load(function() {
    //dom not only ready, but everything is loaded
});

Ответ 2

Простой способ сделать это - ввести задержку. Используйте setTimeout() для достижения этого. Например: setTimeout (func, 1000);

Вышеупомянутая строка выполняет функцию "func" после ожидания 1000 миллисекунд. В зависимости от времени, затрачиваемого на загрузку содержимого, установите тайм-аут (параметр) в setTimeout.

Пример использования:

$(document).ready(function(){

 function func()
 {
   alert("hi");
}
setTimeout(func, 1000);
});

Надеюсь, это поможет!

Ответ 3

Не уверен, сколько данных вводится... но что, если на готовом документе вы запустили jquery ajax-вызов и использовали завершенный метод для запуска функции маркера? Если будет много данных, это будет медленная загрузка страницы.

В любом случае похож на этот

$.ajax({
            type: "POST",
            url: "Where data is actually stored",
            data: { ChannelTypeID: ChannelTypeID },
            datatype: "html",
            beforeSend: function () {

            },
            success: function (myHTML) {
                $('body').html(myHTML);
            },
            error: function () {
                alert("Ajax request was unsuccessful");
            },
            complete: function () {
                highlighterFunction();
            }
        });

Полный метод определяет функцию, которая будет выполняться при завершении запроса AJAX. Надеемся, что успех будет достаточно быстрым, чтобы выталкивать данные и позволять вашей подсветке работать должным образом.

Ответ 4

Проблема с подходами window.onload

Даже если вы используете подход $(window).load, ваш ярлык может быть запущен до чего-то из $(document).ready завершения, так как может быть много асинхронных функций обратного вызова по всему месту.

Мой подход

Я использую комбинацию ожидающих document.readyState == 'complete и setTimeout. Идея состоит в том, что я хочу подождать, пока страница будет полностью отображена (следовательно, 'complete'), а затем убедитесь, что содержимое обертки $(document).ready JQuery завершено (следовательно, setTimeout).

Здесь, как бы я решил вашу проблему, считая, что 200 миллисекунд достаточно времени для всего внутри $(document).ready(function(){ /*...*/ }); для завершения.

function highlighterAction() {
    // actually do the highlighting stuff here
}

function highlighter() {
    /*
      The short pause allows any required callback functions
      to execute before actually highlighting, and allows
      the JQuery $(document).ready wrapper to finish.
     */
    setTimeout(function() {
        highlighterAction();
    }, 200);
}

/*
  Only trigger the highlighter after document fully loaded.  This is
  necessary for cases where page load takes a significant length
  of time to fully load.
*/
if (document.readyState == 'complete') {
    highlighter();
} else {
    document.onreadystatechange = function () {
        if (document.readyState === "complete") {
            highlighter();
        }
    }
}