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.
The jQuery
load()method does not trigger aloadevent.To perform an action after the load has completed, you can use a callback function, however the
loadis "completed" upon receiving a success or failure. This is the point where the content begins loading.Given your code, there is no simple nor reliable method to determine when dynamically-loaded content has actually rendered on the page.