Запуск javascript после полной обработки страницы

Question

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

$(myFunction); 

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

EDIT:

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

Answer 1

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

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

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

EDIT

комментарий Пера Криса, вот JQuery путь:

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

Answer 2

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

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

$.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 завершается. Надеемся, что успех будет достаточно быстрым, чтобы выталкивать данные и позволять вашей подсветке работать должным образом.

Answer 3

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

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

Примера:

$(document).ready(function(){ 

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

Надеется, что это помогает!

Answer 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(); 
     } 
    } 
}