Запуск 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();
}
}
}