jQuery .on('load') works for one function, but not a different one
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.
javascript jquery html jquery-3
asked Nov 21 at 3:30
Julian Lachniet
184116
add a comment |
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.
javascript jquery html jquery-3
asked Nov 21 at 3:30
Julian Lachniet
184116
@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 at 3: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 at 3:42
add a comment |
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.
javascript jquery html jquery-3
asked Nov 21 at 3:30
Julian Lachniet
184116
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.
javascript jquery html jquery-3
javascript jquery html jquery-3
asked Nov 21 at 3:30
Julian Lachniet
184116
asked Nov 21 at 3:30
Julian Lachniet
184116
edited Nov 21 at 3:52
asked Nov 21 at 3:30
Julian Lachniet
184116
asked Nov 21 at 3:30
Julian Lachniet
184116
asked Nov 21 at 3:30
Julian Lachniet
184116
184116
@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 at 3: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 at 3:42
add a comment |
@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 at 3: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 at 3:42
@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 at 3:38
@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 at 3: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 at 3:42
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 at 3:42
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 21 at 3:45
Tyler Roper
12.7k11641
This doesn't work. The fallback is triggered before#dynamicis loaded. (e.g. pictures and other media)
– Julian Lachniet
Nov 21 at 3:50
The jQueryload()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 aget()instead.
– Tyler Roper
Nov 21 at 3:52
I want theconsole.logwhen the actual content loads (which should be what.on('load')does, right?)
– Julian Lachniet
Nov 21 at 3:53
Is there not an alternative that can apply to the entire<div>
– Julian Lachniet
Nov 21 at 3: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.
– Tyler Roper
Nov 21 at 4:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404869%2fjquery-onload-works-for-one-function-but-not-a-different-one%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 21 at 3:45
Tyler Roper
12.7k11641
This doesn't work. The fallback is triggered before#dynamicis loaded. (e.g. pictures and other media)
– Julian Lachniet
Nov 21 at 3:50
The jQueryload()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 aget()instead.
– Tyler Roper
Nov 21 at 3:52
I want theconsole.logwhen the actual content loads (which should be what.on('load')does, right?)
– Julian Lachniet
Nov 21 at 3:53
Is there not an alternative that can apply to the entire<div>
– Julian Lachniet
Nov 21 at 3: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.
– Tyler Roper
Nov 21 at 4:00
add a comment |
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.
answered Nov 21 at 3:45
Tyler Roper
12.7k11641
This doesn't work. The fallback is triggered before#dynamicis loaded. (e.g. pictures and other media)
– Julian Lachniet
Nov 21 at 3:50
The jQueryload()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 aget()instead.
– Tyler Roper
Nov 21 at 3:52
I want theconsole.logwhen the actual content loads (which should be what.on('load')does, right?)
– Julian Lachniet
Nov 21 at 3:53
Is there not an alternative that can apply to the entire<div>
– Julian Lachniet
Nov 21 at 3: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.
– Tyler Roper
Nov 21 at 4:00
add a comment |
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.
answered Nov 21 at 3:45
Tyler Roper
12.7k11641
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.
answered Nov 21 at 3:45
Tyler Roper
12.7k11641
edited Nov 21 at 4:05
answered Nov 21 at 3:45
Tyler Roper
12.7k11641
answered Nov 21 at 3:45
Tyler Roper
12.7k11641
answered Nov 21 at 3:45
Tyler Roper
12.7k11641
12.7k11641
This doesn't work. The fallback is triggered before#dynamicis loaded. (e.g. pictures and other media)
– Julian Lachniet
Nov 21 at 3:50
The jQueryload()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 aget()instead.
– Tyler Roper
Nov 21 at 3:52
I want theconsole.logwhen the actual content loads (which should be what.on('load')does, right?)
– Julian Lachniet
Nov 21 at 3:53
Is there not an alternative that can apply to the entire<div>
– Julian Lachniet
Nov 21 at 3: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.
– Tyler Roper
Nov 21 at 4:00
add a comment |
This doesn't work. The fallback is triggered before#dynamicis loaded. (e.g. pictures and other media)
– Julian Lachniet
Nov 21 at 3:50
The jQueryload()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 aget()instead.
– Tyler Roper
Nov 21 at 3:52
I want theconsole.logwhen the actual content loads (which should be what.on('load')does, right?)
– Julian Lachniet
Nov 21 at 3:53
Is there not an alternative that can apply to the entire<div>
– Julian Lachniet
Nov 21 at 3: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.
– Tyler Roper
Nov 21 at 4:00
This doesn't work. The fallback is triggered before
#dynamic is loaded. (e.g. pictures and other media)– Julian Lachniet
Nov 21 at 3:50
This doesn't work. The fallback is triggered before
#dynamic is loaded. (e.g. pictures and other media)– Julian Lachniet
Nov 21 at 3: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 at 3:52
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 at 3:52
I want the
console.log when the actual content loads (which should be what .on('load') does, right?)– Julian Lachniet
Nov 21 at 3:53
I want the
console.log when the actual content loads (which should be what .on('load') does, right?)– Julian Lachniet
Nov 21 at 3:53
Is there not an alternative that can apply to the entire
<div>– Julian Lachniet
Nov 21 at 3:58
Is there not an alternative that can apply to the entire
<div>– Julian Lachniet
Nov 21 at 3: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.
– Tyler Roper
Nov 21 at 4:00
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.
– Tyler Roper
Nov 21 at 4:00
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404869%2fjquery-onload-works-for-one-function-but-not-a-different-one%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
@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 at 3: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 at 3:42