0

我从头开始，开发单页网络应用程序。我正在使用一些 jQuery 来创建一个加载屏幕，在加载所有代码后将其替换为 Web 应用程序。

我试图通过仅将加载屏幕的代码index.php、内联 CSS 和包含 jQuery + 我自己的代码的 JS 文件的链接放在我的文件中来做到这一点。在我的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>

捆绑.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!");
});

我的main.js代码还没有完成，但最后三行是作为测试添加的。我打算删除加载屏幕，并在加载#dynamic时显示 div #dynamic。但是，我从来没有看到Fully loaded!登录到控制台。

除此之外，其他一切似乎都在工作。CSS 和 HTML 都毫无问题地加载到文档中。但是，#dynamic加载时的侦听器永远不会触发。

什么可能导致此问题？

编辑：

基于标记为重复建议，我尝试将事件处理程序修改为

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

我在这里有同样的问题。

编辑2：

我将两个 CSS 文件合并为一个。

4

1 回答 1

0

jQueryload()方法不会触发load事件。

要在加载完成后执行操作，您可以使用回调函数，但是load在收到成功或失败时“完成”。这是内容开始加载的点。

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

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

鉴于您的代码，没有简单且可靠的方法来确定动态加载的内容何时实际呈现在页面上。

于 2018-11-21T03:45:10.367 回答