Как проверить, полностью ли загружена страница (скрипты и все)?

Question

Я знаю, здесь есть много вопросов об этом.У меня ситуация несколько иная, и я пока не могу найти ответ.

Я пытаюсь показать сообщение после полной загрузки страницы.Используя $(document).ready, document.readyStateChange, мне все равно.

Дело в том, что документ готовится прямо в середине скрипта, который должен быть выполнен.Я пытался сделать это с window.onload (и это эквивалент jQuery), но он показывает мне сообщение, прежде чем появляются некоторые изображения / элементы.Есть ли способ дождаться его выполнения и только потом показать сообщение?(Имейте в виду, что мне может понадобиться сделать это несколько раз на одной странице).

Заранее спасибо!

Answer 1

Убедиться, что страница действительно загружена, не всегда легко.особенно для страниц, которые используют контент через Ajax, и другие ресурсы, которые загружаются асинхронно (каждый ресурс может быть загружен независимо и параллельно с другими ресурсами, такими как изображения, например).

Мое предложение по подходу к таким ситуациям:

Создайте некоторый глобальный отложенный объект (обещание) и убедитесь, что он будет разрешен только после того, как все, от чего он зависит, будет «готов».

Минимальный пример:

// start your web app code..
var p1 = new Promise();
var p2 = new Promise();
var p3 = new Promise();

// when all dependencies are done loading, means the page is truly "ready"
Promise.all([p1, p2, p3])
  .then(() => { 
       // page done loading
  });

// somewhere in the code...wait for Ajax content to load
// and resolve "p1" after the content has loaded
p1.resolve();

// somewhere in the code...wait for some other Ajax content to load
// and resolve "p2" after the content has loaded
p2.resolve();

// somewhere in the code...wait for all the images to load 
// (http://stackoverflow.com/a/1977898/104380)
// and resolve "p3"
p3.resolve();

Дело в том, что вам нужно вручную убедиться, что все различные асинхронные детали полностью загружены.это утомительная работа, но очень надежное решение.

Answer 2

window.onload это решение. window.onload срабатывает, когда DOM готов и когда все ресурсы также загружены в браузер. Другими словами, он срабатывает, когда круг браузера перестает вращаться.

Answer 3

bianca, почему бы не попробовать загрузить сообщение из скрипта, который нужно запустить? Запустите сообщение в конце скрипта, чтобы вы знали, что скрипт, который вам нужно запустить, завершен.

Answer 4

Javascript выполняется в том порядке, в котором он написан. Я полагаю, что ваш текущий код запускается после загрузки HTML (т.е. window.onload), если это так, просто сделайте ваше сообщение последним, что вызывается в вашем Javascript.

Единственное исключение из этого - если вы выполняете асинхронные вызовы XMLHttpRequest, вы захотите иметь переменную, для которой установлено значение "false", и когда этот XMLHttpRequest завершит установку своих переменных на "true". Тогда вы можете просто использовать setTimeout, который вы слушаете, когда эта переменная имеет значение true.

Answer 5

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