We Keep Coding

What is the difference between Shopify checkout liquid template page:load event and DOMContentLoaded?

Shopify checkout liquid offers an event called:
page:load
Documentation: page-load
Unfortunately, the documentation is sparse.
What is the difference between page:load and regular JavaScript DOMContentLoaded event?

From MDN webdocs
The DOMContentLoaded event fires when the initial HTML document has
been completely loaded and parsed, without waiting for stylesheets,
images, and subframes to finish loading.
While from Shopify Docs
All of the checkout steps are hosted at a single URL path, where the
content is loaded dynamically depending on the current step.
Shopify is most probably loading some stuff on their end on DOMContentLoaded and fires page:load event when everything is ready and you can make your DOM customizations. Moreover, DOMContentLoaded will only be fired once for whole checkout, but page:load would be fired once for each Checkout step.
Same thing has been described in the docs for page:load.
The page:load event is triggered when the content of each step is
loaded. This is the default event that you should use when adding
content into the page on load.

Gmail Chrome Extension and document.readyState

I am creating a chrome extension for gmail, and I have seen some odd instabilities around when certain page objects load. Since I am trying to modify the GMAIL DOM (Customize it for my extension) it needs to be fully loaded before my initializer runs. My extension always initializes well before the DOM is fully loaded, so I need a way to have it poll until the DOM is fully formed to do its thing.
I have tried using document.readyState to poll the document so I know when to start modifying the fully-loaded DOM, but it doesn't always work.
I put into the console a printout of document.readyState polled every 100 milliseconds once the page begins to load, and I noticed that about 1/10 page loads document.readyState becomes "complete" BEFORE the DOM is fully loaded. I can tell this because I do a jQuery selector for the GMAIL compose button and it comes up empty when this occurs, and find it as expected every other time (It finds the compose button).
Why would this be? Is there a better way to have my extension initialize script check to make sure the DOM is fully loaded before firing the DOM mods?
EDIT--
I have the script that checks document.readyState as a script injected into the UI as a content script.

Gmail website is dynamic. readyState / DOMContentLoaded and friends are all rather useless, since most of the UI is built on the fly and is not in the "initial" DOM. This is exactly what you're observing.
You need to either poll for the compose button as RobW mentioned, or watch for it being added with MutationObserver events. Also of note is the mutation-summary library.

Your code for document.readyState should be located on your content scripts.
The document referred by the background and popup pages is not the web page's.
More info here: https://developer.chrome.com/extensions/overview#arch

Event handler for web fonts load?

I've got a piece of code that wants to perform a jump to a particular id on the page as soon as the page is ready. I accomplish this by performing a jquery.animate() so that the scrollTop is at my target element.
However, I'm using web fonts, and for some reason the ready event is firing before the web fonts have loaded and been applied. The result is that the animation ends on a position that is often completely unrelated to the actual position of the element I want to scroll to.
I've verified this by opening the timeline in the Chrome inspector, where I see the animation triggering, followed by the web font loading, followed by a re-render which causes my animation target scroll point to become meaningless. I've also confirmed that this issue does not manifest itself when I use a system font.
Could anyone offer some advice? Perhaps there's some sort of event that fires after a web font has been applied?

$(document).ready(...) is triggered when the browser has finished downloading the entire HTML of the page. It is often before the browser has finished downloading the stylesheets, let alone the font files.
Assuming it's loaded from a stylesheet included in the HTML (as opposed to a JavaScript added stylesheet), you should be listening for the window event, rather than the document's load event.
$(window).on('load', function(){
// your resources are loaded
});

Try using .load instead, as .ready is only after the DOM is loaded.
$(window).load(function () {
// run code
});
Here is info regarding why .ready() is NOT what you want:
http://api.jquery.com/ready/
Here is info why .load() (really the Javascript load event) is what you want (it waits for resources to be loaded):
http://api.jquery.com/load-event/

I want to show preloader for non ajax call and hide preloader after resources loaded?

I am requesting a html5 web page it contains images and sound files. Once all the images and sound files loaded i want to hide a preloader using style property. How do I know last resource loaded for a web page request so that I can hide the preloader?
Note: Here is my situation, I dont use any ajax call it's a normal webpage request.

How do I know last resource loaded for a web page request so that I can hide the preloader?
The load event fires when all files have finished loading from all resources, including ads and images. This link ( http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html ) from IE9 testdrive demonstrate diffenence between load event and DOMContentLoaded event (not supported in IE8-).
As result:
When page starts to loading you must to register event handler for load event and display preloader message.
When load event occur then browser execute your load-event-handler in which you can hide preloader message.

Well, you dont really have access to the "loading status" of your image and sound files. But the Browser fires the onLoad-event, if a component is loaded. This works even for images (and mayby soundfiles). see http://www.htmlcodetutorial.com/images/_IMG_onLoad.html . you can use $(document).ready(...) too (for your html-page) if you are using jQuery.

Do <iframes> and images loaded via AJAX delay window.onload?

I'm trying to make the window.onload event fire sooner so that Google will think my page loads faster (this is a frustrating task since how long it takes to get to window.onload is basically irrelevant from the user perspective, but I digress)
However, I don't know what delays the onload event! Specifically:
If I load a Facebook likebox on my page in an <iframe>, does its loading delay the onload event? What about if the likebox iframe has to load a bunch of profile pics; does onload wait until they fully load?
Suppose that on document ready I do an async AJAX request for an HTML blob and inject it into the page. If this HTML blob contains a bunch of <img> tags, does the onload event wait for all of these to load?
In general, how does the browser know when to fire the onload event? What sorts of things block onload, and what sorts of things don't?

a) You can't control window.onload except by reducing the page "weight". Its up to the browser to decide when its going to declare that event.
b) Google doesn't have a clue about the window.onload event because its not parsing JavaScript.
1) You can completely eliminate the Facebook payload by using XFBML version of the like button and asynchronous loading of the Facebook JavaScript SDK (http://developers.facebook.com/docs/reference/javascript/FB.init/). Do note that it will work only if JavaScript is enabled.
2) Everything that is going to dramatically increase the weight of your web page should be loaded asynchrouniusly, preferably after the window.onload event has fired.

If you look at the waterfall, in firebug or chrome inspector, iframe and ajax calls does affect the onload event. I ran into similar problem with facebook considerably slowing down site. Yes, while looking at pageload time in webmaster tool, it shows the lag.
My solution was to dynamically append facebook iframe when the page is completely loaded. and for ajax calls, i only trigger them on load.
This brought my page load time from 7 seconds with embedded facebook iframe, to 2.6 seconds with dynamically appending it.