jQuery .on ('load') работает для одной функции, но не для другой - PullRequest
Новая
       26

jQuery .on ('load') работает для одной функции, но не для другой

0 голосов
/ 21 ноября 2018

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

Я пытаюсь сделать это, просто поместив код для экрана загрузки в свойindex.php файл со встроенным CSS и ссылкой на файл JS, содержащий jQuery + мой собственный код.В моем файле index.php есть код, который выглядит следующим образом: 

<!DOCTYPE html>
<html>
<head>
  <!-- other meta -->
  <style> /* Inline styles */ </style>
</head>
<body>
  <div id="loading-screen"> <!-- loading screen code --> </div>
  <div id="dynamic"></div>
  <script src="/bundle.js"></script>
</body>
</html>

bundle.js 

// jQuery code
$.getScript("/main.js",function(){});

main.js 

$('<link>', {
   href: '/main.css',
   id: 'css-preload',
   rel: 'stylesheet'
}).appendTo('head');

$('#css-preload').on('load', function() {
  $('#dynamic').load('/landing.php');
});

$('#dynamic').on('load', function() {
  console.log("Fully loaded!");
});

My main.js код не закончен, но последние три строки были добавлены в качестве теста.Я намеревался убрать загрузочный экран и показать #dynamic div, когда #dynamic загружен.Тем не менее, я никогда не вижу, чтобы Fully loaded! регистрировался на консоли.

Кроме этого, все остальное, кажется, работает.CSS и HTML загружаются в документ без проблем.Тем не менее, слушатель, когда #dynamic загружается, никогда не срабатывает.

Что может быть причиной этой проблемы?

Редактировать:

На основе отметкиВ качестве дублирующего предложения я попытался изменить свой обработчик событий на 

$(document).on('load', '#dynamic', function() {
  console.log("Fully loaded!");
});

У меня та же проблема, что и здесь.

Редактировать 2:

Я слилсяоба моих CSS-файла в один.

1 Ответ

0 голосов
/ 21 ноября 2018

Метод jQuery load() не вызывает событие load.

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

$('.css-preload').on('load', function() {
  $('#dynamic').load('/landing.php', dynamicLoadCompleted);
});

function dynamicLoadCompleted() {
    console.log("Loading complete!");
}

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

...