Question

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

我试图通过仅将加载屏幕的代码放入内嵌CSS以及指向包含jQuery +我自己的代码的JS文件的链接的index.php文件中来做到这一点。在我的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!");
});

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

除此之外，其他所有功能似乎都在起作用。 CSS和HTML都可以毫无问题地加载到文档中。但是，#dynamic加载时的侦听器永远不会触发。

什么可能导致此问题？

编辑：

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

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

我在这里有同样的问题。

编辑2：

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

Answer 1

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

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

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

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

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

jQuery .on（'load'）适用于一种功能，但不适用于另一种功能

1 个答案: