JS onpage/window load [duplicate] - javascript

This question already has answers here:
How to run a function when the page is loaded?
(11 answers)
Closed 6 years ago.
I want to run this script on pageload or after all the elements are loaded.
JavaScript
<script type="text/javascript">
function backgroundload (){
$(".portfolio-background-color")
var color = /#[0-9\A-F]+/.exec($(this).html())[0];
$(this).css('background', color)
}
window.onload = backgroundload;
</script>
i'm new to js please check if my code is okay and is it the correct way to load the js

All Javascript runs on page load. If what you mean is that you want it to run after all the elements in the page have been initialized, there are several ways:
window.onload
document.onload
body.onload
$(document).ready
There are more in-depth explanations of the support for the first three, and the differences between them, here. Documentation for $(document).ready is here.
However, in my experience, the easiest way to ensure that a script runs after all synchronously-loaded content is simply to place the <script> element at the bottom of the <body>.

Related

How do I continue executing my .js code after programmatically adding jQuery to the DOM? [duplicate]

This question already has answers here:
How to include jQuery dynamically in any website using pure javascript
(9 answers)
Closed 25 days ago.
How do I continue executing my .js code after programmatically adding jQuery to the DOM?
The 3rd answer in this post shows how to add jquery to the dom but how should you continue executing further code?
For example you can't just add code underneath the self invoked function because jQuery hasn't yet loaded. How do I continue writing my .js code so that it executes?
$(window).on('load', function() {
// jQuery hasn't yet loaded so can't use this yet.
});
Execute the code that requires jQuery in the script's load event listener.
var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
jQueryScript.addEventListener("load", function() {
$(document).ready(function() {
...
});
});
document.head.appendChild(jQueryScript);

Plain Javascript: Do I really need wait document ready to attach event to elements? [duplicate]

This question already has answers here:
Is it really necessary to wait for DOM ready to manipulate the DOM?
(4 answers)
Closed 4 years ago.
It seems the following inline code works by putting js right after the tag:
(1)
<div id="xx"></div>
<script>
document.getElementById('xx').addEventListener('click', aFunction);
</script>
It seems there is no need to wait document ready like this:
(2)
<div id="xx"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById('xx').addEventListener('click', aFunction);
});
</script>
Will the inline code (1) always work?
Please notice that I made sure <div id="xx"></div> is before the script.
You dont have to but you should. If you dont you will get errors when you try performing actions on elements in the dom when they havent been loaded yet, using document ready just ensures you dont have this issue, one less problem to debug basically.

JavaScript functions fire in codepen but not JSFiddle. Why? [duplicate]

This question already has answers here:
Why does jsfiddle throw error that function is not defined? [duplicate]
(1 answer)
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 6 years ago.
I'm trying to run a basic JavaScript function from an external file but I'm getting inconsistent results. Basically, I can't get a button's "onclick" event to fire when I put the script in an external JS page. I can get it work in CodePen:
CodePen
nonsense code
but NOT in JSFiddle:
JS Fiddle Examlple
I can always get it work when the script is part of the HTML page but I don't want to do that. Can you help? Thanks!
jsfiddle puts the javascript code in its own context:
//<![CDATA[
window.onload=function(){
function clickFunction()
{
alert("this is working");
}
}//]]>
But codepen puts the js in the global scope.

how to call a javascript method soon after page load [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript that executes after page load
how to call a javascript method as soon as page is loaded.
i have a java script which needs to be called soon after the jsp page is loaded, how to achieve this in javascript.
could any one of you help me pelase.
Regards
You can write a code snippet something like this :-
window.onload(function(){
//Your JavaScript here
});
And if using JQuery then
document.ready(function(){
//Your JavaScript Here
});
Or you can have all your JS after all the HTML.
you can even use a function called :--
document.onload(function(){
//Your code Here
});
Last but not the least you could even try out this
<body onload="YourJSMethod();">
<!-- Some html content -->
</body>
you can try
<body onload="someMethod();">
<!-- Some html content -->
</body>
This will call your method as soon as body tag of your page is loaded.
Alternatively you can make use of jquery's document ready function.
$(document).ready(function() {
// your code
});

document.ready like functionality in Javascript? [duplicate]

This question already has answers here:
How to check if DOM is ready without a framework?
(7 answers)
Closed 1 year ago.
I have a requirement that states to use only plain JavaScript and not jQuery. I need to initialize some variables(using some function) as soon as the DOM is loaded and not when the page has fully loaded. In short it should not wait for the whole page to load. In jQuery it can be very easily done using document.ready() function.
Is it possible to implement it in JavaScript using any function?
a "practical" way is just placing a script block before the end of the document (even is not really equivalent to domready)
...
<script>...</script>
</body>
</html>
or use one of various pure-js implementation of DomReady event, like http://snipplr.com/view/6029/domreadyjs/
It's sometimes achieved like this
<body>
<!--
All your html tags here
....
....
-->
<script type="text/javascript">
//this should execute after the above tags and elements have rendered
</script>
</body>
You can use DOMContentLoaded event if supported:
MSDN: http://msdn.microsoft.com/en-us/library/windows/apps/hh868490.aspx
MDN: https://developer.mozilla.org/en/DOM/DOM_event_reference/DOMContentLoaded
if you realy want to wait for "ready event" you can for example use that kind of thing :
(function(w,evt,fn){
if (w.addEventListener){// W3C DOM
w.addEventListener(evt,fn,false);
}
else if (w.attachEvent) { // IE DOM
w.attachEvent("on"+evt, fn);
}
})(window,'load',function(){
// your code here
});
but it's indeed better to simply use a well placed 'script' tag as your code will probably work and start sooner

Categories