0

I'm starting from the ground up, developing a single page web app. I'm using some jQuery to create a loading screen, which is replaced with the web app after all the code is loaded.

I'm trying to do this by only putting the code for the loading screen in my index.php file, with inline CSS, and a link to a JS file containing jQuery + my own code. In my index.php file, I have code that looks like this:

<!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 code isn't finished, but the last three lines were added as a test. I intended to have the loading screen removed, and the #dynamic div shown when #dynamic is loaded. However, I never see Fully loaded! logged to the console.

Other than that, everything else seems to be working. The CSS and HTML are both loaded into the document without issue. However, the listener for when #dynamic loads never triggers.

What could be causing this issue?

Edit:

Based on the mark as duplicate suggestion, I tried modifying my event handler to 

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

I have the same issue here.

Edit 2:

I merged both of my CSS files into one.

Julian Lachniet
  • 128
  • 1
  • 18
  • @TylerRoper I tried to change my event handler to `$(document).on('load', '#dynamic', function() {console.log("Fully loaded!");});`, which does not do anything. – Julian Lachniet Nov 21 '18 at 03:38
  • you could try and debug the load function by having a callback function which would display a status: `$('#dynamic').load('/landing.php', function( response, status, xhr ) { console.log(status); console.log(xhr.status); });` – Mojo Allmighty Nov 21 '18 at 03:42

1 Answers1

0

The jQuery load() method does not trigger a load event.

To perform an action after the load has completed, you can use a callback function, however the load is "completed" upon receiving a success or failure. This is the point where the content begins loading.

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

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

Given your code, there is no simple nor reliable method to determine when dynamically-loaded content has actually rendered on the page.

Tyler Roper
  • 20,529
  • 6
  • 30
  • 51
  • This doesn't work. The fallback is triggered before `#dynamic` is loaded. (e.g. pictures and other media) – Julian Lachniet Nov 21 '18 at 03:50
  • The jQuery `load()` method completes upon the return of a success or failure, which is the point where the content **begins** loading. It sounds like you should be doing this entirely differently, perhaps by using a `get()` instead. – Tyler Roper Nov 21 '18 at 03:52
  • I want the `console.log` when the actual content loads (which should be what `.on('load')` does, right?) – Julian Lachniet Nov 21 '18 at 03:53
  • Is there not an alternative that can apply to the entire `
    `
     – Julian Lachniet Nov 21 '18 at 03:58
  • No, there is not, nor is there a reliable method to determine when a dynamically-loaded image has actually completed loading. There is a somewhat relevant discussion [here](https://stackoverflow.com/questions/10609422/check-if-dynamically-loaded-images-are-complete). – Tyler Roper Nov 21 '18 at 04:00