The thing is, i'm adding Annotorious to my openSeadragon project.
http://annotorious.github.io/demos/openseadragon-preview.html
to get this plugins start, Following are the options.
<script>
function init() {
anno.makeAnnotatable(document.getElementById('myImage'));
}
</script>
...
<body onload="init();">
<img src="example.jpg" id="myImage" />
</body>
Here is the problem, i use these to delay the loading of javascript on the viewer block.
<script type="text/javascript">
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Once i add onload="init();" to my code.the viewer won't function.
Are there conflicts between these two? if so, how to solve it?
I think this should help:
<script type="text/javascript">
var htmlOnLoad = window.onload;
window.onload = function(e){htmlOnLoad(e); downloadJSAtOnload(e)};
</script>
The idea is to keep the handler bound with HTML and call both: the html- and js- handlers.
Onload behavior is like so:
(probably depends on the browser type - behavior will might change - I worked on chrome)
If you set body onload="_fn" it will work on page loads
If you add window.onload=_fn on top of the page script (before the body tag) they will both load (2 then 1)
If you will add window.onload on the most bottom area of the HTML. It will be the only one to be executed on page load. (body "onload" will be override)
Adding an event listener to the window - you can add as much as you need and they will all be loaded as ordered respectively.
When the load event fires you are trying to do two things:
Call init (which, in turn, calls anno.makeAnnotatable)
Asynchronously load the JavaScript which makes anno.makeAnnotatable available
You can't call the function before it exists. You have to delay the calling of init until the loading of the JS that downloadJSAtOnload triggers has finished. (The specifics of that depend on how downloadJSAtOnload works).
Related
I intend to call a js, which will not use anything when loading the page. Therefore, I need to call this js only when the entire page has been loaded, so as not to delay anything or load the screen for the user.
<html>
<body>
<script type="text/javascript" defer=defer src="function.js"></script>
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "function.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
</body>
</html>
My question is: in the above ways, which one would be more efficient? I need to decrease the loading time of my page and with that I want to "postpone" everything that is not necessary.
The “defer” keyword postpones loading of scripts until the DOMContentLoaded event is fired.
From the Mozilla Developer Center:
The DOMContentLoaded event is fired when the document has been
completely loaded and parsed, without waiting for stylesheets, images,
and subframes to finish loading (the load event can be used to detect
a fully-loaded page).
This means that version 1 (defer) will possibly start loading the scripts earlier than version 2, while still keeping the loading efficient.
index.html
<html>
<head>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript">
window.onload = function() {
console.log("hello from html");
};
</script>
</head>
<body>
<div class="bar">bar</div>
</body>
</html>
foo.js
// this js file will be completely ignored with window.onload
//window.onload = function() {
console.log("hello from external js");
var bar = document.getElementsByClassName("bar");
// this returns 0 instead of 1
console.log(bar.length);
//};
When window.onload is used in html, window.onload from external js will be ignored.
When window.onload from external js is commented out, bar.length returns 0.
When window.onload from html is removed, window.onload from external js works fine.
Can anyone explain why I can't use both window.onload?
If I had to use window.onload in html, how do tell if window is loaded from external js?
1)The way you're binding, you can have just one method attached to an event. You need to add an event listener for what you want.
window.addEventListener("load", function() { alert("hello!");});
Setting directly a method to the onload event will replace any previously attached method. But if you use listeners instead, you can have many of them bound to an event.
2)If you comment out the onload in your external file, when the document.getElementsByClassName("bar") is called, your document isn't ready yet, then, it will return 0 items.
3)Use the addEventListener as I explained in the first point. If you apply this in both places, it will work like a charm.
onload is a property of window. It acts like any other variable property. When you try to use it twice you're overwriting the original value with your second write.
So your entire external script is ignored when you wrap it in window.onload, because window.onload is then overwritten to be
function() {
console.log("hello from html");
};
If you want to do execute 2 functions, define 2 functions, a and b,
and set window.onload like this:
window.onload = function(){
a();
b();
}
Alternatively, you can bind 2 separate events in the way Alcides' answer suggests. My personal view is that its cleaner to do a single bind with multiple functions since its easier to know whats bound, know what order your functions will execute in, and see everything thats happening in one place, but its mostly a matter of style/preference if the order doesn't matter.
Thats Correct, you are overwriting your own onload, but you can always attach a new event listener to the window like this
function onLoadHandler(){
console.log("hello from external js");
var bar = document.getElementsByClassName("bar");
// page not loaded, so this returns 0 instead of 1
console.log(bar.length);
}
if (window.addEventListener) {
window.addEventListener('load', onLoadHandler); }
else if (window.attachEvent) { window.attachEvent('onload', onLoadHandler ); }
I'm trying to add css property to an existing rule on page load. It works with onclick event but does not run when the page loads. Here is the code:
HTML
<ul id="list">
<li>aa</li>
<li>bb</li>
<ul>
<a onclick="changeIt(); return false" href="#">change background color</a>
CSS
li {
color: black;
}
Javascript (jQuery is not applicable in my case.)
function changeIt() {
var theRules = document.styleSheets[1];
theRules.insertRule("li{background-color: yellow;}", 1);
}
changeIt(); // doesnt run on page load
Try running it on window load:
window.onload = function() {
changeIt();
};
Your code probably doesn't work because the DOM is not ready when your function runs.
There are several ways to check if the DOM is ready before executing any code.
The most common way is to wait for the onLoad event to occur.
In your case that might look something like <body onload='changeIt();'>...</body>
One of the problems with waiting for onLoad is that if the page take a long time to load, execution of your code will be delayed.
And in fact the DOM can be ready even before the page has loaded. So another way to check DOM readiness is to use 'DOMContentLoaded' event, see http://www.javascriptkit.com/dhtmltutors/domready.shtml for more info.
You could always try
<body onload="changeIt()">
It's not the same functionality as the jquery document.ready, but it'll work after the body has loaded.
Have you tried putting the changeIt() call in the onload event of the body?
<body onload="changeIt()">
<!-- Body here -->
</body>
Here is the circumstance:
I have 2 pages:
1 x html page
1 x external Javascript
Now in the html page, there will be internal Javascript coding to allow the placement of the window.onload, and other page specific methods/functions.
But, in the external Javascript I want certain things to be done before the window.onload event is triggered. This is to allow customized components to be initialized first.
Is there a way to ensure initialization to occur in the external Javascript before the window.onload event is triggered?
The reason I have asked this, is to attempt to make reusable code (build once - use all over), to which the external script must check that it is in 'order/check' before the Javascript in the main html/jsp/asp/PHP page takes over. And also I am not looking for a solution in jQuery #_#
Here are some of the links on Stack Overflow I have browsed through for a solution:
Javascript - How to detect if document has loaded (IE 7/Firefox 3)
How to check if page has FULLY loaded(scripts and all)?
Execute Javascript When Page Has Fully Loaded
Can someone help or direct me to a solution, your help will be muchness of greatness appreciated.
[updated response - 19 November 2012]
Hi all, thanks for you advice and suggested solutions, they have all been useful in the search and testing for a viable solution.
Though I feel that I am not 100% satisfied with my own results, I know your advice and help has moved me closer to a solution, and may indeed aid others in a similar situation.
Here is what I have come up with:
test_page.html
<html>
<head>
<title></title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript" src="test_script_1.js"></script>
<script type="text/javascript" src="test_script_2.js"></script>
<script type="text/javascript">
window.onload = function() {
document.getElementById("div_1").innerHTML = "window.onload complete!";
}
</script>
<style type="text/css">
div {
border:thin solid #000000;
width:500px;
}
</head>
<body>
<div id="div_1"></div>
<br/><br/>
<div id="div_2"></div>
<br/><br/>
<div id="div_3"></div>
</body>
</html>
loader.js
var Loader = {
methods_arr : [],
init_Loader : new function() {
document.onreadystatechange = function(e) {
if (document.readyState == "complete") {
for (var i = 0; i < Loader.methods_arr.length; i++) {
Loader.method_arr[i]();
}
}
}
},
load : function(method) {
Loader.methods_arr.push(method);
}
}
test_script_1.js
Loader.load(function(){initTestScript1();});
function initTestScript1() {
document.getElementById("div_1").innerHTML = "Test Script 1 Initialized!";
}
test_script_2.js
Loader.load(function(){initTestScript2();});
function initTestScript2() {
document.getElementById("div_2").innerHTML = "Test Script 2 Initialized!";
}
This will ensure that scripts are invoked before invocation of the window.onload event handler, but also ensuring that the document is rendered first.
What do you think of this possible solution?
Thanking you all again for the aid and help :D
Basically, you're looking for this:
document.onreadystatechange = function(e)
{
if (document.readyState === 'complete')
{
//dom is ready, window.onload fires later
}
};
window.onload = function(e)
{
//document.readyState will be complete, it's one of the requirements for the window.onload event to be fired
//do stuff for when everything is loaded
};
see MDN for more details.
Do keep in mind that the DOM might be loaded here, but that doesn't mean that the external js file has been loaded, so you might not have access to all the functions/objects that are defined in that script. If you want to check for that, you'll have to use window.onload, to ensure that all external resources have been loaded, too.
So, basically, in your external script, you'll be needing 2 event handlers: one for the readystatechange, which does what you need to be done on DOMready, and a window.onload, which will, by definition, be fired after the document is ready. (this checks if the page is fully loaded).
Just so you know, in IE<9 window.onload causes a memory leak (because the DOM and the JScript engine are two separate entities, the window object never gets unloaded fully, and the listener isn't GC'ed). There is a way to fix this, which I've posted here, it's quite verbose, though, but just so you know...
If you want something to be done right away without waiting for any event then you can just do it in the JavaScript - you don't have to do anything for your code to run right away, just don't do anything that would make your code wait. So it's actually easier than waiting for events.
For example if you have this HTML:
<div id=one></div>
<script src="your-script.js"></script>
<div id=two></div>
then whatever code is in your-script.js will be run after the div with id=one but before the div with id=two is parsed. Just don't register event callbacks but do what you need right away in your JavaScript.
javascript runs from top to bottom. this means.. if you include your external javascript before your internal javascript it would simply run before the internal javascript runs.
It is also possible to use the DOMContentLoaded event of the Window interface.
addEventListener("DOMContentLoaded", function() {
// Your code goes here
});
The above code is actually adding the event listener to the window object, though it's not qualified as window.addEventListener because the window object is also the global scope of JavaScript code in webpages.
DOMContentLoaded happens before load, when images and other parts of the webpage aren't still fully loaded. However, all the elements added to the DOM within the initial call stack are guaranteed to be already added to their parents prior to this event.
You can find the official documentation here.
On my mobile, in safari If I go to my default page that has alert("Hello") on the body onload event, the alert displays with my default page fully visible in the background. If I then go to another site for example bbc.co.uk and then type in my the web address for my default page in the address bar, the alert shows with the BBC content in the background, its like the alert loads before the page has loaded.
How do I only show the message once the whole page is visible. I've read that window.onload waits until everything is loaded before it triggers the alert but I must be getting something wrong because the behaviour doesn't change. I've also tried:
$(document).ready(function () {
window.onload= alert('Test');
});
and
<meta http-equiv="Pragma" content="no-cache"/>
in case it has something to do with cache but I don't think this is the issue. Any ideas ?
Thanks
You pass a reference to a function to the window.onload and not the actual call.
try
window.onload = function(){
alert('test');
}
if you wanto display the alrert box either use window.onload there is no point in use both , here is code that will work fine
window.onload (which is implemented even in old browsers), which fires when the entire page loads
window.onload = function(){ alert('test'); }
jQuery provides document.ready, which abstracts those away, and fires as soon as the page's DOM is ready
$(document).ready(function () {
alert('Test');
});
Check answer from : window.onload vs $(document).ready()
window.onload is the built-in Javascript event, but as its implementation had subtle quirks across browsers (FF/IE6/IE8/Opera), jQuery provides document.ready, which abstracts those away, and fires as soon as the page's DOM is ready (doesn't wait for images etc.).
document.ready is a jQuery function, wrapping and providing consistency to the following events:
document.ondomcontentready / document.ondomcontentloaded - a newish event which fires when the document's DOM is loaded (which may be some time before the images etc. are loaded); again, slightly different in IE and in rest of the world
and window.onload (which is implemented even in old browsers), which fires when the entire page loads (images, styles, etc.)
$(window).load(function() {
alert('Test');
});
<!DOCTYPE html>
<html>
<body onload="show_popup()">
<script>
function show_popup() {
alert("Popup shows");
}
</script>
</body>
</html>