We Keep Coding

Java Script Event while waiting to load

Is there any event that fires while the page is trying to load . I dont mean onload , which fires only after the page has been loaded. I want to use it for when the user is waiting for the new page to load

DOMContentLoaded fires before the onload event.

There is no such event that you mention. For more information visit this page:
https://javascript.info/onload-ondomcontentloaded
I hope it helps ;)

DOMContentLoaded event is not firing

I have a page with javascript.
In $(function() {}); Everything works fine except for a couple clients with web-proxy, it doesn't work.
Digging into the problem, I found that DOMContentLoaded event is not firing at those clients (Google Chrome).
Is there way to find out reason which prevents firing of event, or getting pending event list ?
Also is there a way to listen to any events which fire before DOMContentLoaded ?

Do browsers remember events?

I would like to know what the browser does about events that happen while scripts are currently running. Does the browser just ignore these events or does it store them and execute them after any scripts stop running? Is this dependent on the event? I am specifically interested in mousemove and drag events.
Thanks

What do you mean? Events that trigger javascripts?
If so then yes, the triggered script is remembered and put on the call stack.
Javascript is single threaded -- so an event that triggers a new script will have to wait until all other scripts on the stack are completed before it fires.
So if your drag or mousemove trigger a script then that trigger will be remembered.

DOMContentLoaded is not getting triggered while visiting few sites. Any workaround?

I am developing a Firefox extension. My extension needs to get notified when a page completes loading. To implement this I am using DOMContentLoaded event. This works fine most of the times. But while visiting few sites (like nytimes.com), this event is not getting triggered at all. I am not sure whether these sites are using some special scripts.
Is there any workaround for this? Or is there a better way to implement what I am trying to do?

DOMContentLoaded may not be what you need...
According to MDN
Fired at the page's Document object when parsing of the document is
finished. By the time this event fires, the page's DOM is ready, but
the referenced stylesheets, images, and subframes may not be done
loading; use the "load" event to detect a fully-loaded page.
https://developer.mozilla.org/en/Gecko-Specific_DOM_Events
So, it is possible that nytimes.com and others my be using frames or complex CSS and that is why you are not getting the correct trigger.
As mentioned above, the "fix" is to
use the "load" event to detect a fully-loaded page

jQuery events .load(), .ready(), .unload()

Just a simple question, for the jQuery event. Are the .load(), .ready() and .unload() run in order when the DOM is loaded? The answer seems yes when I see the jQuery Documentation.
<script type="text/javascript">
$(window).load(function () {
// run code
initializeCode();
});
$(document).ready(function() {
//run code that MUST be after initialize
});
$(window).unload(function() {
Cleanup();
});
</script>
However, the code inside the .ready() is execute before the initializeCode(); is execute, so I feel really strange. And now I have to place my code inside the .onload() method and just after the initializeCode(); line, which means to be inside the .ready() block.
Could someone explain me more about this, as I am new to jQuery?

NOTE: .load() & .unload() have been deprecated
$(window).load();
Will execute after the page along with all its contents are done loading. This means that all images, CSS (and content defined by CSS like custom fonts and images), scripts, etc. are all loaded. This happens event fires when your browser's "Stop" -icon becomes gray, so to speak. This is very useful to detect when the document along with all its contents are loaded.
$(document).ready();
This on the other hand will fire as soon as the web browser is capable of running your JavaScript, which happens after the parser is done with the DOM. This is useful if you want to execute JavaScript as soon as possible.
$(window).unload();
This event will be fired when you are navigating off the page. That could be Refresh/F5, pressing the previous page button, navigating to another website or closing the entire tab/window.
To sum up, ready() will be fired before load(), and unload() will be the last to be fired.

window load will wait for all resources to be loaded.
document ready waits for the document to be initialized.
unload well, waits till the document is being unloaded.
the order is: document ready, window load, ... ... ... ... window unload.
always use document ready unless you need to wait for your images to load.
shorthand for document ready:
$(function(){
// yay!
});

If both "document.ready" variants are used they will both fire, in the order of appearance
$(function(){
alert('shorthand document.ready');
});
//try changing places
$(document).ready(function(){
alert('document.ready');
});

Also, I noticed one more difference between .load and .ready. I am opening a child window and I am performing some work when child window opens. .load is called only first time when I open the window and if I don't close the window then .load will not be called again. however, .ready is called every time irrespective of close the child window or not.